用Javascript呈現樹層次結構

Question

我的terms如下：

var terms = [
        { id: 1, name: "Name 1", parent: null },
        { id: 2, name: "Name 2", parent: 6 },
        { id: 3, name: "Name 3", parent: null },
        { id: 4, name: "Name 4", parent: 2},
        { id: 5, name: "Name 5", parent: 3 },
        { id: 6, name: "Name 6", parent: null },
        { id: 7, name: "Name 7", parent: 3 },
        { id: 8, name: "Name 8", parent: 9 },
        { id: 9, name: "Name 9", parent: 4 }
];

現在，我要處理term以獲得輸出：

var orderedTerms = [
        { id: 1, name: "Name 1", parent: null , deep: 0},
        { id: 3, name: "Name 3", parent: null , deep: 0},
        { id: 5, name: "Name 5", parent: 3 , deep: 1},
        { id: 7, name: "Name 7", parent: 3 , deep: 1},
        { id: 6, name: "Name 6", parent: null , deep: 0},
        { id: 2, name: "Name 2", parent: 6, deep: 1},
        { id: 4, name: "Name 4", parent: 2, deep: 2},
        { id: 9, name: "Name 9", parent: 4, deep: 3},
        { id: 8, name: "Name 8", parent: 9, deep: 4 }
];

我認為有人可以使用Javascript（NodeJS）來幫助我。 先感謝您。

Answer 1

下面的代碼應該可以幫助您：

 var terms = [ { id: 1, name: "Name 1", parent: null }, { id: 2, name: "Name 2", parent: 6 }, { id: 3, name: "Name 3", parent: null }, { id: 4, name: "Name 4", parent: 2}, { id: 5, name: "Name 5", parent: 3 }, { id: 6, name: "Name 6", parent: null }, { id: 7, name: "Name 7", parent: 3 }, { id: 8, name: "Name 8", parent: 9 }, { id: 9, name: "Name 9", parent: 4 } ]; var deep0 = terms.filter(function(term) { if (term.parent === null) { term.deep = 0; return true; } return false; }); function makeTree(source, arr, final) { if (!final) final = arr.slice(); if (arr.length > 0) { var deep = arr[0].deep + 1; source.forEach(function (item, i) { if (arr.map(function(term) { return term.id; }).indexOf(item.parent) >= 0) { item.deep = deep; var idx = final.map(function(term) { return (term.id === item.parent || term.parent === item.parent); }).lastIndexOf(true); final.splice(idx + 1, 0, item); } }); makeTree(source, final.filter(function(term) { return term.deep === deep; }), final); } return final; } var final = makeTree(terms, deep0); document.body.innerHTML = '<pre><code>' + JSON.stringify(final, null, 2) + '</code></pre>'; 

代碼背后的漏洞思想是，首先找到所有沒有父項的項目，然后遞歸地遍歷其子項（深度），然后以正確的順序將其插入最終數組。

如果您有任何疑問，請發表評論。

Answer 2

只需進行一點遞歸即可。

 function getTree(parent, level) { level = level || 0; terms.forEach(function (a) { if (a.parent === parent) { orderedTerms.push({ id: a.id, name: a.name, parent: a.parent, deep: level }); getTree(a.id, level + 1); } }); } var terms = [ { id: 1, name: "Name 1", parent: null }, { id: 2, name: "Name 2", parent: 6 }, { id: 3, name: "Name 3", parent: null }, { id: 4, name: "Name 4", parent: 2 }, { id: 5, name: "Name 5", parent: 3 }, { id: 6, name: "Name 6", parent: null }, { id: 7, name: "Name 7", parent: 3 }, { id: 8, name: "Name 8", parent: 9 }, { id: 9, name: "Name 9", parent: 4 } ], orderedTerms = []; getTree(null); document.write('<pre>' + JSON.stringify(orderedTerms, 0, 4) + '</pre>'); 

獎勵：帶有臨時存儲的版本。

 function sortTree(array) { function getTree(parent, level) { temp[parent] && temp[parent].forEach(function (a) { result.push({ id: array[a].id, name: array[a].name, parent: array[a].parent, deep: level }); getTree(array[a].id, level + 1); }); } var temp = {}, result = []; array.forEach(function (a, i) { temp[a.parent] = temp[a.parent] || []; temp[a.parent].push(i); }); getTree(null, 0); return result; } var terms = [ { id: 1, name: "Name 1", parent: null }, { id: 2, name: "Name 2", parent: 6 }, { id: 3, name: "Name 3", parent: null }, { id: 4, name: "Name 4", parent: 2 }, { id: 5, name: "Name 5", parent: 3 }, { id: 6, name: "Name 6", parent: null }, { id: 7, name: "Name 7", parent: 3 }, { id: 8, name: "Name 8", parent: 9 }, { id: 9, name: "Name 9", parent: 4 } ]; document.write('<pre>' + JSON.stringify(sortTree(terms), 0, 4) + '</pre>');