data: [
{
cid: "211211",
parentCid: "212121",
level: 3,
number: "2.1.1",
subject: "Title 2.1.1"
},
{
cid: "111111",
parentCid: "",
lv: 1,
number: "1",
subject: "Title1"
},
{
cid: "222222",
parentCid: "",
lv: 1,
number: "2",
subject: "Title2"
},
{
cid: "212121",
parentCid: "222222",
lv: 2,
number: "2.1",
subject: "Title2.1"
},
{
cid: "333333",
parentCid: "",
lv: 1,
number: "3",
subject: "Title3"
}
]
上面是我的json数据的示例,我想将这些数据附加到网页上,如下所示? (所有项目都有一个“ cid”,其中一些有“ parentCid”,这是它的子级别。)
1Title1
2Title2
2.1Title2.1
2.1.1Title2.1.1
2.2Title2.2
3Title3
4Title4 //If necessary
4.1Title4.1
4.2Title4.2
下面是我的代码,可以显示lv1项目,但不知道下一步该怎么做。
var chapterListDiv = document.getElementById("listSummary");
for(var i=0; i<data.length; i++){
if(data[i].lv == 1){
var divLv1 = document.createElement("div");
divLv1.className = 'lv1';
var content = document.createTextNode(data[i].number + "." + " " + data[i].subject);
divLv1.appendChild(content);
chapterListDiv.appendChild(divLv1);
}
}
最佳答案
结果在这里:http://jsfiddle.net/ct9j3h4y/3/
由于未对数据对象进行排序,因此将得到孤立的节点。我为此使用了一个临时存储设备。
数据是线性的,但无序。因此,应执行两个循环:
var chapterListDiv = document.getElementById("listSummary");
var store = document.createDocumentFragment(); //we use this to store temporary orphaned childs
for(var i=0; i<data.length; i++){
var node = document.createElement("div");
node.className = "lv" + (data[i].level || data[i].lv);
var content = document.createTextNode(data[i].number + "." + " " + data[i].subject);
node.appendChild(content);
node.setAttribute("data-id", data[i].cid); //set a data-id attribute. We need it for the orphaned values.
node.setAttribute("data-parent-id", data[i].parentCid); //set a data-parent-id attribute. We need it for the orphaned values.
if (data[i].parentCid == "") //we have a root node
{
chapterListDiv.appendChild(node);
}
else
{
var parent = chapterListDiv.querySelector('div[data-id="'+data[i].parentCid+'"]'); //look for a node with the parent id.
if (parent) //parent is found
{
parent.appendChild(node);
}
else
{
store.appendChild(node); //temp store the node.
}
}
}
//final loop, to put all orphans into place.
var storeChilds = store.querySelectorAll('div[data-parent-id]');
if (storeChilds)
{
Array.prototype.map.call(storeChilds, function(element){
var parent = document.querySelector('div[data-id="'+element.getAttribute("data-parent-id")+'"]') ||
store.querySelector('div[data-id="'+element.getAttribute("data-parent-id")+'"]')
parent.appendChild(element);
});
}
在进入最后一部分之前,代码非常简单。在那里,所有存储的子代均基于父代ID进行选择,然后从存储中添加到树中。
使用的技术:
querySelector
和querySelectorAll
Array.prototype.map
documentFragment
data attribute
关于javascript - 如何组织json数据并保存为新的数组结构?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/31917193/