如何组织json数据并保存在新的数组结构中

Question

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);
    }
  }

Answer 1

这里的结果: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