Display nested array data in a click event

Question

I have this data and I'm displaying the name. But when I click on, in this case Sweden, I want to display additional info. In the code below I just want to display the country code, but this creates four additional <p> tags because of .forEach loop. That's not really what I want.

How would I go about if I just want to display the country code, and what if I wanted to display all the additional info? I'm kinda stuck as of now.

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>

Mamun · Accepted Answer · 2019-10-16 13:18:54Z

You should have some kind of button or link upon which clicking you can show/hide the extra information.

You can try the following way:

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>

Ah, that works for the code. But what if I want to show all, code, population etc do I need the inner forEach then?
@hbrovell, yes in that case you need the inner forEach(), I have updated the answer please check:)

Collectives™ on Stack Overflow

Display nested array data in a click event

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related