比如如下基本数据:
- 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);
来源: http://www.bubuko.com/infodetail-2674719.html