How to loop and display array of objects and their nested arrays

Question

I need help, I got stuck on objects with multiple nested arrays. I have a json file which consists of object, that holds array of objects, and these objects have another array of objects in them. What is the best way to loop through it?

fetch("data.json").then((response) => response.json()).then((data) => {
document.getElementById("main").innerHTML += `<h1>${data.name}</h1>`;
for (i = 0; i < data.topics.length; i++) {
    
  document.getElementById("main").innerHTML += `
    <div>
    <h2>${data.topics[i].title}</h2>
    <ul id="programs">
    <li>programs title here</li>
    <li>programs title here</li>
    <li>programs title here</li>
    <ul>
    </div>
    `;
}});

json data looks like this:

{ "name": "Open Day Event", "date": "July 7", "topics": [ { "title": "Engineering", "id": 1, "description": "some text here", "programs": [ { "title": "Some title", "id": 1, "description": "Some description", "price": 30 }, { "title": "Some title", "id": 2, "description": "Some description", "price": 30 }, { "title": "Some title", "id": 3, "description": "Some description", "price": 30 } ] }, { "title": "History", "id": 2, "description": "some text here", "programs": [ { "title": "Some title", "id": 1, "description": "Some description", "price": 30 }, { "title": "Some title", "id": 2, "description": "Some description", "price": 30 }, { "title": "Some title", "id": 3, "description": "Some description", "price": 30 } ] }, { "title": "English", "id": 3, "description": "some text here", "programs": [ { "title": "Some title", "id": 1, "description": "Some description", "price": 30 }, { "title": "Some title", "id": 2, "description": "Some description", "price": 30 }, { "title": "Some title", "id": 3, "description": "Some description", "price": 30 } ] } ] }

Answer 1

You can use Array.prototype.forEach()

let html = "";


data.topics.forEach(topic => {
    html += `<h2>${topic.title}</h2> <ul>`;
  
  topic.programs.forEach(program => {
    html += `<li>${program.title}</li>`
  });
  
  html += `</ul>`
})

document.getElementById('main').innerHTML = html;

Answer 2

You can achieve that recursively and by iterating the nested array.

Demo :

const jsonObj = {
  "name": "Open Day Event",
  "date": "July 7",
  "topics": [{
    "title": "Engineering",
    "id": 1,
    "description": "some text here",
    "programs": [{
      "title": "Some title",
      "id": 1,
      "description": "Some description",
      "price": 30
    }, {
      "title": "Some title",
      "id": 2,
      "description": "Some description",
      "price": 30
    }, {
      "title": "Some title",
      "id": 3,
      "description": "Some description",
      "price": 30
    }]
  }, {
    "title": "History",
    "id": 2,
    "description": "some text here",
    "programs": [{
      "title": "Some title",
      "id": 1,
      "description": "Some description",
      "price": 30
    }, {
      "title": "Some title",
      "id": 2,
      "description": "Some description",
      "price": 30
    }, {
      "title": "Some title",
      "id": 3,
      "description": "Some description",
      "price": 30
    }]
  }, {
    "title": "English",
    "id": 3,
    "description": "some text here",
    "programs": [{
      "title": "Some title",
      "id": 1,
      "description": "Some description",
      "price": 30
    }, {
      "title": "Some title",
      "id": 2,
      "description": "Some description",
      "price": 30
    }, {
      "title": "Some title",
      "id": 3,
      "description": "Some description",
      "price": 30
    }]
  }]
};

function createList(parent, array) {
    array.forEach(function (o) {
        var li = document.createElement("li"),
            ul;

        li.textContent = o.title;
        parent.appendChild(li);
        if (o.programs) {
            ul = document.createElement("ul");
            li.appendChild(ul);
            createList(ul, o.programs);
        }
    });
}

createList(document.querySelector("ul"), jsonObj.topics);

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<ul></ul>