js for循环把tree结构转换为list

假设有这样一个data,我需要把children提取出来与外面那层同级,然后去除children,也就是说我需要整个data只有一级只有一层,然后这里面children里的pid要等于父级的id。
sort排序从0开始,比如label为“1”的父级底下的children里有两条数据,这两条children里的sort从0开始到1。
同样的,如果同时另外一个label为“2”的父级底下的children里有两条数据,他这两条children里的sort也是从0开始到1。

ps:data中的其他key、value不可动,要保留住,例如label

原始↓ :

data:  [{
          id: '1',
          label: '1',
          sort: 1,
          children:[{ pid: null, label: '1-1', sort: null },{ pid: null, label: '1-2', sort: null },]
        },{
          id: '2',
          label: '2',
          sort: 2,
          children:[{ pid: null, label: '2-1', sort: null },{ pid: null, label: '2-2', sort: null },]
        }]

理想↓:

       [{ id: '1', label: '1', sort: 1 },
        { pid: '1', label: '1-1', sort: 0 },
        { pid: '1', label: '1-2', sort: 1 },
        { id: '2', label: '2', sort: 2 },
        { pid: '2', label: '2-1', sort: 0 },
        { pid: '2', label: '2-2', sort: 1 }]

说的可能有点乱,大婶们如果没听懂我在说啥请轻喷,麻烦你们了!!

阅读 3.9k
5 个回答
let data = [{
          id: '1',
          label: '1',
          sort: 1,
          children:[{ pid: null, label: '1-1', sort: null },{ pid: null, label: '1-2', sort: null },]
        },{
          id: '2',
          label: '2',
          sort: 2,
          children:[{ pid: null, label: '2-1', sort: null },{ pid: null, label: '2-2', sort: null },]
        }]
        
       let b = data.flatMap(i=>{i.children.map((j,index)=>{j.pid = i.id;j.sort=index});let a = i.children;delete i.children;a.unshift(i);console.log(a);return a});
       console.log(b);
function listToTree (list) {
  const result = [], l = [...list]
  while (l.length) {
    const node = { ...l.shift() }
    const children = node.children && node.children.map((d, idx) => ({ ...d, sort: idx, pid: node.id }))
    children && l.unshift(children)
    delete node.children
    result.push(node)
  }
  return result
}

测试:

const res = listToTree(data)
console.log(JSON.stringify(res, null, 2))

输出:

[
  {
    "id": "1",
    "label": "1",
    "sort": 1
  },
  {
    "0": {
      "pid": "1",
      "label": "1-1",
      "sort": 0
    },
    "1": {
      "pid": "1",
      "label": "1-2",
      "sort": 1
    }
  },
  {
    "id": "2",
    "label": "2",
    "sort": 2
  },
  {
    "0": {
      "pid": "2",
      "label": "2-1",
      "sort": 0
    },
    "1": {
      "pid": "2",
      "label": "2-2",
      "sort": 1
    }
  }
]

各种树结构转换可以看这里:
https://github.com/Lushenggan...

给个思路,对每一个根节点用深度优先展开子节点,展开过程中子节点pid为根节点id,sort递增

function flat(list) {
    function exclude(key, obj) {
        const cp = {...obj};
        delete cp[key]
        return cp;
    }
    function merge(target, source) {
        return Object.keys(source).reduce((res, k) => {
            const value = source[k]
            if(value!=null && value!= undefined) res[k] = value;
            return res;
        }, target)
    }
    return list.map(item => item.children.map(child => merge(exclude('children',item), child))).flat()
}

我的菜鸡做法。。

let data = [{
          id: '1',
          label: '1',
          sort: 1,
          children:[{ pid: null, label: '1-1', sort: null },{ pid: null, label: '1-2', sort: null },]
        },{
          id: '2',
          label: '2',
          sort: 2,
          children:[{ pid: null, label: '2-1', sort: null },{ pid: null, label: '2-2', sort: null },]
        }]

let newData = [];
function func(data,id = null) {
    for(let i = 0 ; i< data.length; i++) {
        let obj = {};
        if (id === null){
            obj['id'] = data[i].id;         
            obj['label'] = data[i].label;   
            obj['sort'] = data[i].sort; 
        } else {
            obj['pid'] = id;    
            obj['label'] = data[i].label;     
            obj['sort'] = i; 
        }    
        newData.push(obj);
        if (data[i].children && data[i].children.length >= 1){
            func(data[i].children,data[i].id)            
        }
    }
}
func(data);
console.log(newData)
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题