呈現樹層次使用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

只是一個小的遞歸會做。

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

Answer 2

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

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>';

的代碼背後的孔想法是先找到所有這些沒有父母的物品，然後遞歸遍歷他們的孩子（深深地），將他們以正確的順序插入最終陣列。

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