js将有父子关系的数据转换成树形结构数据

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了js将有父子关系的数据转换成树形结构数据相关的知识,希望对你有一定的参考价值。

js将有父子关系的数据转换成树形结构数据

比如如下基本数据:

let allDatas = [
  {
    id: 3,
    name: ‘bbbb‘,
    parendId: 1
  },
  {
    id: 2,
    name: ‘aaaaa‘,
    parendId: 2
  },
  {
    id: 4,
    name: ‘ccccc‘,
    parendId: 1
  },
  {
    id: 5,
    name: ‘ddddd‘,
    parendId: 4
  },
  {
    id: 6,
    name: ‘eeeee‘,
    parendId: 4
  }, 
  {
    id: 7,
    name: ‘ffff‘,
    parendId: 6
  },
  {
    id: 8,
    name: ‘ggggg‘,
    parendId: 3
  },
  {
    id: 9,
    name: ‘hhhhh‘,
    parendId: 5
  },
  {
    id: 10,
    name: ‘jjjj‘,
    parendId: 6
  }
];

需要转换成如下数据格式,如下:

[
  {
    "id": 3,
    "name": "bbbb",
    "children": [
      {
        "id": 8,
        "name": "ggggg",
        "children": []
      }
    ]
  }, 
  {
    "id": 4,
    "name": "ccccc",
    "children": [
      {
        "id": 5,
        "name": "ddddd",
        "children": [
          {
            "id": 9,
            "name": "hhhhh",
            "children": []
          }
        ]
      }, 
      {
        "id": 6,
        "name": "eeeee",
        "children": [
          {
            "id": 7,
            "name": "ffff",
            "children": []
          }, 
          {
            "id": 10,
            "name": "jjjj",
            "children": []
          }
        ]
      }
    ]
  }
]

如上id为8的父节点就是id为3的,而id为3的父节点为1,但是父节点目前没有,所以id为3就是顶级节点了。同理其他的也是一样的道理;

JS代码如下:

// 属性配置设置
let attr = {
  id: ‘id‘,
  parendId: ‘parendId‘,
  name: ‘name‘,
  rootId: 1
};
function toTreeData(data, attr) {
  let tree = [];
  let resData = data;
  for (let i = 0; i < resData.length; i++) {
    if (resData[i].parendId === attr.rootId) {
      let obj = {
        id: resData[i][attr.id],
        name: resData[i][attr.name],
        children: []
      };
      tree.push(obj);
      resData.splice(i, 1);
      i--;
    }
  }
  var run = function(treeArrs) {
    if (resData.length > 0) {
      for (let i = 0; i < treeArrs.length; i++) {
        for (let j = 0; j < resData.length; j++) {
          if (treeArrs[i].id === resData[j][attr.parendId]) {
            let obj = {
              id: resData[j][attr.id],
              name: resData[j][attr.name],
              children: []
            };
            treeArrs[i].children.push(obj);
            resData.splice(j, 1);
            j--;
          }
        }
        run(treeArrs[i].children);
      }
    }
  };
  run(tree);
  return tree;
}
let arr = toTreeData(allDatas, attr);
console.log(arr);

以上是关于js将有父子关系的数据转换成树形结构数据的主要内容,如果未能解决你的问题,请参考以下文章

js中将有层级关系的一维数据转换为父子级关系的二维数据菜单权限三级层级数据实现(树形结构数据)

使用js将后台返回的数据转换成树形结构

后端提供树形结构数据

后端提供树形结构数据

js中平级数组和树形结构数据相互转换

js把树形数据转成扁平数据