javascript - 如何组织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