时间戳

首页 > 解决方案 > 如何构建 Javascript 递归树

javascript - 如何构建 Javascript 递归树

问题描述

对不起，我的英文不好，希望大家理解。我有一个数组：

var data=[
{
"id": 2,
"parent_id": 1
},
{
"id": 3,
"parent_id": 2
},
{
"id": 7,
"parent_id": 3
},
{
"id": 67,
"parent_id": 1
}
]

这就是我需要查看的结果：

[
{
"id": 2,
"parent_id": 1,
"child":[
  {
    "id": 3,
    "parent_id": 2,
    "child":[{
      "id": 7,
      "parent_id": 3
      },
    ]}
  ]},
{
"id": 67,
"parent_id": 1
},]

我的想法是：1个方法有2个相同数组的参数。我使用嵌套循环。如果 parent_id == id 将添加字段“child”。

const getTree = function(data, maindata){
  const result=data.forEach(item =>{
    const child=maindata.forEach(element =>{
      if(item.id === element.parent_id){
        return true;
      }
      return false
    })
    getTree(child, maindata)
    item.child = child;
  })
  return result;
}
console.log(getTree(data,data))

但它没有按应有的方式工作。希望大家帮忙。谢谢

标签： javascriptarraysrecursiontree

解决方案

我不确定您的原始代码应该做什么，但是您没有得到任何结果，因为 data.forEach 不返回任何内容。您需要首先过滤掉子对象（我认为这是您的原始代码的目标），然后将所有对象分配给它们的父对象，如下所示：

var data=[{"id": 2,"parent_id": 1},{"id": 3,"parent_id": 2},{"id": 7,"parent_id": 3},{"id": 67,"parent_id": 1},]

const filterData = function(data) {
  return data.filter(item => {
    let isChild = false;
    data.forEach(parent => {
      if (parent.id == item.parent_id) {
        isChild = true;
        return;
      }
    });
    return !isChild;
  });
}

const getTree = function(data, maindata){
  return data.map(item =>{
    let children = [];
    maindata.forEach(child => {
      if (item.id == child.parent_id) {
        children.push(child);
      }
    });
    if (children.length > 0) {
      item.child = getTree(children, maindata);
    }
    return item;
  });
}
console.log(getTree(filterData(data),data));

推荐阅读