I am currently attempting to retrieve information from a local JSON file using the following JavaScript script:
let accordion=document.querySelector('#accordion');
fetch('countries.json')
.then(function(response){
return response.json();
})
.then(function(data){
let continents=Object.keys(data);
for(let i=0;i<continents.length;i++){
let continent=continents[i];
let heading=document.createElement('h3');
heading.textContent=continent;
accordion.appendChild(heading);
let countries=data[continent];
let ul=document.createElement('ul');
for(let j=0;j<countries.length;j++){
let country=countries[j];
let li=document.createElement('li');
li.textContent=country;
ul.appendChild(li);
}
accordion.appendChild(ul);
}
})
The current outcome is displaying the header of the "continents" data along with the number of rows correctly. However, the content within the array (which comprises all of the data) is showing as [Object Object]. Therefore, I am looking to properly fetch this data and also access the data within the array objects.