[英]How to loop and display array of objects and their nested arrays
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.我有一个由对象组成的 json 文件,其中包含对象数组,并且这些对象中有另一个对象数组。 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: json 数据如下所示:
{ "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", {“名称”:“开放日活动”,“日期”:“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": "Some description", "price": 30 } ] } ] } "id": 3, "description": "一些描述", "price": 30 } ] } ] }
You can use Array.prototype.forEach()
您可以使用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;
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.