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

Question

我有这些数据，并且正在显示名称。但是，当我单击(在本例中为瑞典)时，我想显示其他信息。在下面的代码中，我只想显示国家/地区代码，但这会创建四个额外的 <p>标签是因为 .forEach环形。这并不是我真正想要的。

如果我只想显示国家/地区代码，我该怎么办？如果我想显示所有附加信息怎么办？我现在有点陷入困境。

let data = [
  {"name": "Swaziland", "code": "SZ"},
  {"name": "Sweden", 
    "info": [
    {"code": "SE"}, 
    {"population": "10.2 million"}, 
    {"area": "447 435km"}, 
    {"capital": "Stockholm"}, 
    {"Language": "Swedish"}]
  },
  {"name": "Switzerland", "code": "CH"},
  {"name": "Syrian Arab Republic", "code": "SY"}
]

let output = '<ul class="searchresultCountries">';
let countries = data;

countries.forEach((value) => {
  output += '<li>' + value.name + '</li>';
});
output += '</ul>';
document.querySelector('#countries').innerHTML = output;

document.addEventListener('click', (e) => {
  data.forEach((item) => {
    if(item.name === e.target.textContent) {
      if(item.info) {
        item.info.forEach((items) => {
          let extraInfo = document.createElement("p");
          extraInfo.textContent = items.code;
          e.target.appendChild(extraInfo);
        });
      }
    }
  }); 
});

ul {
    padding: 0;
}
.searchresultCountries li {
    list-style-type: none;
    border: 1px solid grey;
    margin-bottom: 10px;
    padding: 5px;
}

<div id="countries"></div>

Answer 1

您应该有某种按钮或链接，单击它们可以显示/隐藏额外信息。

您可以尝试以下方法:

let data = [
  {"name": "Swaziland", "code": "SZ"},
  {"name": "Sweden", 
    "info": [
    {"code": "SE"}, 
    {"population": "10.2 million"}, 
    {"area": "447 435km"}, 
    {"capital": "Stockholm"}, 
    {"Language": "Swedish"}]
  },
  {"name": "Switzerland", "code": "CH"},
  {"name": "Syrian Arab Republic", "code": "SY"}
]

let output = '<ul class="searchresultCountries">';
let countries = data;

countries.forEach((value) => {
  output += '<li>' + value.name + '</li>';
});
output += '</ul>';
document.querySelector('#countries').innerHTML = output;

document.addEventListener('click', (e) => {
  data.forEach((item) => {
    if(item.name === e.target.textContent) {
      if(item.info) {
        let extraInfo = document.createElement("p");
        extraInfo.textContent = item.info[0].code;
        e.target.appendChild(extraInfo);
        if(item.info.length > 1){
          let btnExtra = document.createElement("button");
          btnExtra.textContent = "Show More";
          e.target.appendChild(btnExtra);
          btnExtra.addEventListener('click', function(){
            let container = document.createElement("div");
            if(!document.querySelector('.extra')){
              container.classList.add('extra');
              item.info.forEach(function(el, i){
                if(i > 0){ // skip the first
                  let extra = document.createElement("p");
                  extra.textContent = Object.values(el)[0];
                  container.appendChild(extra);  
                }
              });
              e.target.appendChild(container);
              btnExtra.textContent = "Show Less";
            }
            else{
              document.querySelector('.extra').remove();
              btnExtra.textContent = "Show More";
            }
          });
        }
      }
      else{
        let extraInfo = document.createElement("p");
        extraInfo.textContent = item.code;
        e.target.appendChild(extraInfo);
      }
    }
  }); 
});

ul {
    padding: 0;
}
.searchresultCountries li {
    list-style-type: none;
    border: 1px solid grey;
    margin-bottom: 10px;
    padding: 5px;
}

<div id="countries"></div>