Javascript 在单击事件中显示嵌套数组数据

我有这些数据，我正在显示名称。但是当我点击瑞典时，我想显示更多的信息。在下面的代码中，我只想显示国家代码，但由于

.forEach

循环，这会创建四个额外的

标记。那不是我真正想要的

如果我只想显示国家代码，该怎么办？如果我想显示所有其他信息，该怎么办？我现在有点困了

let数据=[
{“名称”：“斯威士兰”，“代码”：“SZ”}，
{“姓名”：“瑞典”，
“信息”：[
{“代码”：“SE”}，
{“人口”：“1020万”}，
{“区域”：“447 435公里”}，
{“首都”：“斯德哥尔摩”}，
{“语言”：“瑞典语”}]
},
{“名称”：“瑞士”，“代码”：“CH”}，
{“名称”：“阿拉伯叙利亚共和国”，“代码”：“SY”}
]
让输出='
；
让国家=数据；
countries.forEach（（值）=>{
输出+='
'+value.name+'
'；
});
输出+='
'；
document.querySelector（“#countries”）.innerHTML=output；
document.addEventListener（'单击'，（e）=>{
data.forEach（（项目）=>{
if（item.name==e.target.textContent）{
如果（项目信息）{
item.info.forEach（（items）=>{
让extraInfo=document.createElement（“p”）；
extraInfo.textContent=items.code；
e、 target.appendChild（extraInfo）；
});
}
}
}); 
});
ul{
填充：0；
}
.searchresultCountries li{
列表样式类型：无；
边框：1px纯灰；
边缘底部：10px；
填充物：5px；
}
您应该有某种按钮或链接，单击可以显示/隐藏额外信息

您可以尝试以下方法：


let数据=[
{“名称”：“斯威士兰”，“代码”：“SZ”}，
{“姓名”：“瑞典”，
“信息”：[
{“代码”：“SE”}，
{“人口”：“1020万”}，
{“区域”：“447 435公里”}，
{“首都”：“斯德哥尔摩”}，
{“语言”：“瑞典语”}]
},
{“名称”：“瑞士”，“代码”：“CH”}，
{“名称”：“阿拉伯叙利亚共和国”，“代码”：“SY”}
]
让输出='
；
让国家=数据；
countries.forEach（（值）=>{
输出+='
'+value.name+'
'；
});
输出+='
'；
document.querySelector（“#countries”）.innerHTML=output；
document.addEventListener（'单击'，（e）=>{
data.forEach（（项目）=>{
if（item.name==e.target.textContent）{
如果（项目信息）{
让extraInfo=document.createElement（“p”）；
extraInfo.textContent=item.info[0]。代码；
e、 target.appendChild（extraInfo）；
如果（item.info.length>1）{
让btnExtra=document.createElement（“按钮”）；
btnExtra.textContent=“显示更多”；
e、 target.appendChild（btnExtra）；
btnExtra.addEventListener（'click'，function（）{
让容器=document.createElement（“div”）；
如果（！document.querySelector（'.extra'））{
container.classList.add（'extra'）；
项目信息forEach（功能（el，i）{
如果（i>0）{//跳过第一个
设extra=document.createElement（“p”）；
extra.textContent=Object.values（el）[0]；
附加子容器（额外）；
}
});
e、 target.appendChild（容器）；
btnExtra.textContent=“显示较少”；
}
否则{
document.querySelector（'.extra'）.remove（）；
btnExtra.textContent=“显示更多”；
}
});
}
}
否则{
让extraInfo=document.createElement（“p”）；
extraInfo.textContent=item.code；
e、 target.appendChild（extraInfo）；
}
}
}); 
});
ul{
填充：0；
}
.searchresultCountries li{
列表样式类型：无；
边框：1px纯灰；
边缘底部：10px；
填充物：5px；
}
啊，这对代码很有效。但是如果我想显示所有、代码、人口等，那么我需要内部的
forEach
吗？@hbrovell，是的，如果你需要内部的
forEach（）
，我已经更新了答案，请检查：）