如何對樹形視圖執行遞歸功能？

Question

如何使用以下數據屬性使用嵌套的無序列表（ <ul> ）渲染樹視圖？

// parentId value is always 0 for root nodes, otherwise this value corresponds to the id of its parent
// sequence represents the order of the element in the branch
// level represents the tree level of the element, root nodes will have a level of 1
var data = [
  { id: 'K66', level: 1, name: 'B', parentId: '0', sequence: 2 },
  { id: 'K65', level: 1, name: 'A', parentId: '0', sequence: 1 },
  { id: 'KK2', level: 2, name: 'Alan', parentId: 'K65', sequence: 1 },
  { id: 'KK22', level: 2, name: 'Bir', parentId: 'K66', sequence: 1 },
  { id: 'KK92', level: 2, name: 'Abe', parentId: 'K65', sequence: 2 },
  { id: 'KK77', level: 3, name: 'Boromir', parentId: 'KK22', sequence: 1 }
];

結果應如下所示：

A
  Alan
  Abe
B
  Bir
    Boromir

我已經嘗試過for循環，但是不久之后我就重復了代碼以獲取子節點，但無法將其重構為遞歸函數。

這是帶有數據的CodePen： http ://codepen.io/nunoarruda/pen/KgVPmv

Answer 1

我將回答OP的以下部分問題...

如何使用以下數據屬性使用嵌套的無序list（）渲染樹視圖？

對於給定的數據結構，不需要遞歸解決方案。 sort提供的數據列表，然后通過特定的reduce回調對其進行轉換的組合已經可以完成工作...

var
  dataList = [
    { id: 'K66', level: 1, name: 'B', parentId: '0', sequence: 2 },
    { id: 'KK2', level: 2, name: 'Alan', parentId: 'K65', sequence: 1 },
    { id: 'K65', level: 1, name: 'A', parentId: '0', sequence: 1 },
    { id: 'KK77', level: 3, name: 'Boromir', parentId: 'KK22', sequence: 1 },
    { id: 'KK22', level: 2, name: 'Bir', parentId: 'K66', sequence: 1 },
    { id: 'KK92', level: 2, name: 'Abe', parentId: 'K65', sequence: 2 }
  ],

  htmlListFragment = dataList.sort(function (a, b) {

    // sort by `level` or, if both are equal (sub)sort by `sequence`
    return (a.level - b.level) || (a.sequence - b.sequence);

  }).reduce(function (collector, item) {
    var
      registry = collector.registry,
      fragment = collector.htmlListFragment,

      parentId = item.parentId,
      id       = item.id,
      name     = item.name,

      member   = registry[id];

    if (!member) {

      member = registry[id] = document.createElement("li");
      member.id = id;
      member.appendChild(document.createTextNode(name));
      member.appendChild(document.createElement("ul"));

      if ((item.level === 1) && (item.parentId === "0"))  {

        fragment.appendChild(member);
      } else {
        registry[parentId].getElementsByTagName("ul")[0].appendChild(member);
      }
    }

    return collector;

  }, {

    registry        : {},
    htmlListFragment: document.createElement("ul")

  }).htmlListFragment;


console.log("htmlListFragment : ", htmlListFragment)