Question

我有像这样的虚拟数据

我需要创建一个像这样的树

CEO

甲
- A1
A2

我的假人看起来像这样

    let d = [
      {
        "name": "CEO",
        "parent": null,
        "id": "5847e80312896b2fa49ce428"
      },
      {
        "name": "A",
        "parent": "5847e80312896b2fa49ce428",
        "id": "5847f58289046550aa05a49d"
      },
      {
        "name": "A1",
        "parent": "5847f58289046550aa05a49d",
        "id": "584804b073697edd3d372529"
      },
       {
        "name": "A2",
        "parent": "5847e80312896b2fa49ce428",
        "id": "584804b073697edd3d372539"
      }
    ];

我尝试过这样的事情

      var newObj = {tree:d.filter(d=>!d.parent)};
      var tree = newObj.tree;

  for(let k in tree){
        for(let i = 0 ; i < tree.length ; i++){  
              newObj.tree[i]['child']=this.returnChildNode(tree[i].id,d);
            }
          }
      console.log(newObj); 

      private returnChildNode(parentId ,arr){
          if(arr.filter(d=>d.parent===parentId).length < 1) return null ; 
          else return arr.filter(d=>d.parent===parentId);
      }

输出获取

{
  "tree": [
    {
      "name": "CEO",
      "parent": null,
      "id": "5847e80312896b2fa49ce428",
      "child": [
        {
          "name": "A",
          "parent": "5847e80312896b2fa49ce428",
          "id": "5847f58289046550aa05a49d"
        },
        {
          "name": "A2",
          "parent": "5847e80312896b2fa49ce428",
          "id": "584804b073697edd3d372539"
        }
      ]
    }
  ]
}

如何通过递归进行深入的通用方式

Answer 1

这是使用reduce

的递归选项

let d = [{
  "name": "CEO",
  "parent": null,
  "id": "5847e80312896b2fa49ce428"
}, {
  "name": "A",
  "parent": "5847e80312896b2fa49ce428",
  "id": "5847f58289046550aa05a49d"
}, {
  "name": "A1",
  "parent": "5847f58289046550aa05a49d",
  "id": "584804b073697edd3d372529"
}, {
  "name": "A2",
  "parent": "5847e80312896b2fa49ce428",
  "id": "584804b073697edd3d372539"
}]

const rec = (parent, arr) => {
  const ref = parent ? parent.id : null
  const children = arr.reduce((ac, x) => {
    if (x.parent === ref)
      ac.push(rec(x, arr))
    return ac
  }, [])
  if (parent)
    parent.children = children
  return (
    parent ?
    parent :
    children[0]
  )
}

const res = rec(null, d)

console.log(res)

Answer 2

你可以试试这个：

var data = [
{
        name: "CEO",
        parent: null,
        id: "0"
      },
      {
        name: "A",
        parent: "0",
        id: "1"
      },
       {
        name: "A1",
        parent: "1",
        id: "2"
      },
       {
        name: "A2",
        parent: "1",
        id: "3"
      },
      {
        name: "A3",
        parent: "1",
        id: "4"
      },



       {
        name: "b",
        parent: "0",
        id: "5"
      },
       {
        name: "A1",
        parent: "5",
        id: "6"
      },
       {
        name: "A2",
        parent: "5",
        id: "7"
      },
      {
        name: "A3",
        parent: "5",
        id: "8"
      },


];

  // data is an array in the above format
function toTree(data) {
   var childrenById = {}; // of the form id: [child-ids]
   var nodes = {};        // of the form id: {name: children: }
   var i, row;
   // first pass: build child arrays and initial node array
   for (i=0; i<data.length; i++) {
       row = data[i];
       nodes[row.id] = {name: row.name, children: []};
       if (row.parent == null) { 
  // assume -1 is used to mark the root's "parent"
          root = row.id;
       } else if (childrenById[row.parent] === undefined) {
          childrenById[row.parent] = [row.id];
       } else {
          childrenById[row.parent].push(row.id);
       }
   }
   // second pass: build tree, using the awesome power of recursion!
   function expand(id) {
       if (childrenById[id] !== undefined) {
           for (var i=0; i < childrenById[id].length; i ++) {
               var childId = childrenById[id][i];
               nodes[id].children.push(expand(childId));
           }
       }
       return nodes[id];
   }
   return expand(root);
}

console.log(JSON.stringify(toTree(data)));

如何在js中创建树视图

2 个答案:

你可以试试这个：