javascript - 我如何循环遍历 Javascript 对象数组,将对象分配为其中其他对象的子对象?树/层次结构

标签 javascript arrays loops tree

我需要帮助遍历以下对象数组以将所有内容重新组织到层次结构/树中。我如何实现这一目标?感谢任何帮助。

[  
   {  
      "id":1,
      "parentId":null,
      "value":"Root Parent 01",
      "children":[]
   },
   {  
      "id":8,
      "parentId":null,
      "value":"Root Parent 02",
      "children":[]
   },
   {  
      "id":36,
      "parentId":15,
      "value":"Child 01",
      "children":[]
   },
   {  
      "id":43,
      "parentId":15,
      "value":"Child 02",
      "children":[]

   },
   {  
      "id":50,
      "parentId":15,
      "value":"Child 03",
      "children":[]

   },
   {  
      "id":15,
      "parentId":null,
      "value":"Root Parent 03",
      "children":[]
   },
   {  
      "id":57,
      "parentId":22,
      "value":"Child 04",
      "children":[]

   },
   {  
      "id":64,
      "parentId":22,
      "value":"Child 05",
      "children":[]

   },
   {  
      "id":71,
      "parentId":22,
      "value":"Child 06",
      "children":[]

   },
   {  
      "id":78,
      "parentId":22,
      "value":"Child 07",
      "children":[]

   },
   {  
      "id":85,
      "parentId":22,
      "value":"Child 08",
      "children":[]

   },
   {  
      "id":92,
      "parentId":22,
      "value":"Child 09",
      "children":[]
   },
   {  
      "id":99,
      "parentId":22,
      "value":"Child 10",
      "children":[]

   },
   {  
      "id":106,
      "parentId":22,
      "value":"Child 11",
      "children":[]

   },
   {  
      "id":22,
      "parentId":null,
      "value":"Root Parent 04",
      "children":[]
   },
   {  
      "id":113,
      "parentId":29,
      "value":"Child 12",
      "children":[]

   },
   {  
      "id":115,
      "parentId":29,
      "value":"Child 13",
      "children":[]

   },
   {  
      "id":122,
      "parentId":29,
      "value":"Child 14",
      "children":[]

   },
   {  
      "id":129,
      "parentId":29,
      "value":"Child 15",
      "children":[]

   },
   {  
      "id":136,
      "parentId":29,
      "value":"Child 16",
      "children":[]

   },
   {  
      "id":143,
      "parentId":29,
      "value":"Child 17",
      "children":[]

   },
   {  
      "id":157,
      "parentId":150,
      "value":"Child 18",
      "children":[]

   },
   {  
      "id":150,
      "parentId":29,
      "value":"Child 19",
      "children":[]

   },
   {  
      "id":29,
      "parentId":null,
      "value":"Root Parent 05",
      "children":[]
   }
]

所需的对象数组:

[
    {  
        "id":1,
        "parentId":null,
        "value":"Root Parent 01",
        "children":[]
    },
    {  
        "id":8,
        "parentId":null,
        "value":"Root Parent 02",
        "children":[]
    },
    {  
        "id":15,
        "parentId":null,
        "value":"Root Parent 03",
        "children":[
            {  
                "id":36,
                "parentId":15,
                "value":"Child 01",
                "children":[]
            },
            {
                "id":43,
                "parentId":15,
                "value":"Child 02",
                "children":[]
            },
            {
                "id":50,
                "parentId":15,
                "value":"Child 03",
                "children":[]
            }
        ]
    },
    {  
        "id":22,
        "parentId":null,
        "value":"Root Parent 04",
        "children":[
            {
                "id":57,
                "parentId":22,
                "value":"Child 04",
                "children":[]
            },
            {
                "id":64,
                "parentId":22,
                "value":"Child 05",
                "children":[]
            },
            {
                "id":71,
                "parentId":22,
                "value":"Child 06",
                "children":[]
            },
            {
                "id":78,
                "parentId":22,
                "value":"Child 07",
                "children":[]
            },
            {
                "id":85,
                "parentId":22,
                "value":"Child 08",
                "children":[]
            },
            {
                "id":92,
                "parentId":22,
                "value":"Child 09",
                "children":[]
            },
            {
                "id":99,
                "parentId":22,
                "value":"Child 10",
                "children":[]
            },
            {
                "id":106,
                "parentId":22,
                "value":"Child 11",
                "children":[]
            }
        ]
    },
    {  
        "id":29,
        "parentId":null,
        "value":"Root Parent 05",
        "children":[
            {
                "id":113,
                "parentId":29,
                "value":"Child 12",
                "children":[]
            },
            {
                "id":115,
                "parentId":29,
                "value":"Child 13",
                "children":[]
            },
            {
                "id":122,
                "parentId":29,
                "value":"Child 14",
                "children":[]
            },
            {
                "id":129,
                "parentId":29,
                "value":"Child 15",
                "children":[]
            },
            {
                "id":136,
                "parentId":29,
                "value":"Child 16",
                "children":[]
            },
            {
                "id":143,
                "parentId":29,
                "value":"Child 17",
                "children":[]
            },
            {
                "id":150,
                "parentId":29,
                "value":"Child 19",
                "children":[
                    {
                        "id":157,
                        "parentId":150,
                        "value":"Child 18",
                        "children":[]
                    }
                ]
            }
        ]
    }
]

想要的树:

根父级 01
根父级 02
根父级 03
--- child 01
--- child 02
--- child 03
根父级 04
--- child 04
--- child 05
--- child 06
--- child 07
--- child 08
--- child 09
--- child 10
--- child 11
根父级 05
--- child 12岁
--- child 13岁
--- child 14
--- child 15岁
--- child 16岁
--- child 17岁
--- child 19岁
------18岁的 child

最佳答案

虽然我非常喜欢尝试自己尝试。我也一直想知道如何做到这一点,并认为这对我来说也是一个很好的机会。

首先,我对输入列表进行排序,以查找确定是子元素而不是父元素的项目。

然后在第二个循环中,我们寻找 child 所属的 parent ,并将它们匹配起来。您可能必须根据您的数据改进此过程。您可能还需要多次循环,但这应该足以让您有所作为。

var inputArray = [{
    "id": 1,
    "parentId": null,
    "value": "Root Parent 01",
    "children": []
  },
  {
    "id": 8,
    "parentId": null,
    "value": "Root Parent 02",
    "children": []
  },
  {
    "id": 36,
    "parentId": 15,
    "value": "Child 01",
    "children": []
  },
  {
    "id": 43,
    "parentId": 15,
    "value": "Child 02",
    "children": []

  },
  {
    "id": 50,
    "parentId": 15,
    "value": "Child 03",
    "children": []

  },
  {
    "id": 15,
    "parentId": null,
    "value": "Root Parent 03",
    "children": []
  },
  {
    "id": 57,
    "parentId": 22,
    "value": "Child 04",
    "children": []

  },
  {
    "id": 64,
    "parentId": 22,
    "value": "Child 05",
    "children": []

  },
  {
    "id": 71,
    "parentId": 22,
    "value": "Child 06",
    "children": []

  },
  {
    "id": 78,
    "parentId": 22,
    "value": "Child 07",
    "children": []

  },
  {
    "id": 85,
    "parentId": 22,
    "value": "Child 08",
    "children": []

  },
  {
    "id": 92,
    "parentId": 22,
    "value": "Child 09",
    "children": []
  },
  {
    "id": 99,
    "parentId": 22,
    "value": "Child 10",
    "children": []

  },
  {
    "id": 106,
    "parentId": 22,
    "value": "Child 11",
    "children": []

  },
  {
    "id": 22,
    "parentId": null,
    "value": "Root Parent 04",
    "children": []
  },
  {
    "id": 113,
    "parentId": 29,
    "value": "Child 12",
    "children": []

  },
  {
    "id": 115,
    "parentId": 29,
    "value": "Child 13",
    "children": []

  },
  {
    "id": 122,
    "parentId": 29,
    "value": "Child 14",
    "children": []

  },
  {
    "id": 129,
    "parentId": 29,
    "value": "Child 15",
    "children": []

  },
  {
    "id": 136,
    "parentId": 29,
    "value": "Child 16",
    "children": []

  },
  {
    "id": 143,
    "parentId": 29,
    "value": "Child 17",
    "children": []

  },
  {
    "id": 157,
    "parentId": 150,
    "value": "Child 18",
    "children": []

  },
  {
    "id": 150,
    "parentId": 29,
    "value": "Child 19",
    "children": []

  },
  {
    "id": 29,
    "parentId": null,
    "value": "Root Parent 05",
    "children": []
  }
]

function DataRollUp(input) {
  var hasParent = [];
  var output = []
  for (i of input) {
    if (i.parentId) {
      hasParent.push(i);
    } else {
      output.push(i);
    }
  }

  for (i of hasParent) {
    var parent = output.find(record => record.id == i.parentId)

    if (parent) {
      parent.children.push(i);
    }
  }


  console.log(output);
  return output;

}

DataRollUp(inputArray)

关于javascript - 我如何循环遍历 Javascript 对象数组,将对象分配为其中其他对象的子对象?树/层次结构,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48938031/

相关文章:

javascript - anchor 标签链接向下滚动太远但仅在移动设备上

javascript - javascript下如何使用onchange事件

PHP/HTML/CSS : Styling an array of data

java - 如何修复表达式的非法开头?

r - 从单个数据集中循环R个多个样本

生成器的 Python 循环行为

javascript - 可编辑的 HTML 内容在很大时非常滞后

javascript - 表格外的表格 "jump"中的angularjs ng-repeat?

php - 检索数据库表名并打印出来

c++ - 内联 asm 缓冲区循环