簡體   English   中英

如何循環遍歷 Javascript 對象數組,將對象指定為其中其他對象的子對象? 樹/層次結構

[英]How can I loop through a Javascript object array assigning objects as children of other objects within? Tree/hierarchical structure

我需要幫助遍歷以下對象數組以將所有內容重新組織為層次結構/樹。 我如何實現這一目標? 任何幫助表示贊賞。

[  
   {  
      "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
---孩子01
---孩子02
---孩子03
根父級 04
---孩子04
---孩子05
---孩子06
---孩子07
---孩子08
---孩子09
---孩子10
---孩子11
根父級 05
---孩子12
---孩子13
---孩子14
---孩子15
---孩子16
---孩子17
---孩子19
------18歲的孩子

雖然我是嘗試自己嘗試的超級粉絲。 我也一直想知道如何做到這一點,並認為這對我來說也是一個很好的機會。

首先,我對輸入列表進行排序,以查找確定為子元素而不是父元素的項目。

然后在第二個循環中,我們查找孩子所屬的父級,並將它們進行匹配。 您可能需要根據您的數據優化此過程。 您可能還需要多次循環,但這應該足以讓您有所收獲。

 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)

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM