如何循环和显示对象数组及其嵌套数组

Question

我需要帮助，我被困在具有多个嵌套数组的对象上。 我有一个由对象组成的 json 文件，其中包含对象数组，并且这些对象中有另一个对象数组。 循环通过它的最佳方法是什么？

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 数据如下所示：

{“名称”：“开放日活动”，“日期”：“7 月 7 日”，“主题”：[ {“标题”：“工程”，“id”：1，“描述”：“这里的一些文字”， "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, "描述”：“一些描述”，“价格”：30 }，{“标题”：“一些标题”，“id”：2，“描述”：“一些描述”，“价格”：30 }，{“标题": "Some title", "id": 3, "description": "Some description", "price": 30 } ] }, { "title": "English", "id": 3, "description": “这里有一些文字”，“程序”：[ {“标题”：“一些标题”，“id”：1，“描述”：“一些描述”，“价格”：30 }，{“标题”：“一些title", "id": 2, "description": "一些描述", "price": 30 }, { "title": "一些标题", "id": 3, "description": "一些描述", "price": 30 } ] } ] }

Answer 1

您可以使用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

您可以通过递归和迭代嵌套数组来实现这一点。

演示：

 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>