在Javascript中迭代嵌套数据

Question

我有以下数据结构：

{  
   "data":[  
      {  
         "id":1,
         "name":"EU Group",
         "parent_id":null,
         "children":[  
            {  
               "id":2,
               "name":"EMEA Branch",
               "parent_id":1,
               "children":[  
                  {  
                     "id":5,
                     "name":"UK",
                     "parent_id":2,
                     "lr":","
                  },
                  {  
                     "id":6,
                     "name":"France",
                     "parent_id":2,
                     "lr":","
                  },
                  {  
                     "id":7,
                     "name":"Germany",
                     "parent_id":2,
                     "lr":","
                  },
                  {  
                     "id":8,
                     "name":"Spain",
                     "parent_id":2,
                     "lr":","
                  },
                  {  
                     "id":9,
                     "name":"Finland",
                     "parent_id":2,
                     "lr":","
                  },
                  {  
                     "id":10,
                     "name":"Hungary",
                     "parent_id":2,
                     "lr":","
                  },
                  {  
                     "id":11,
                     "name":"Poland",
                     "parent_id":2,
                     "children":[  
                        {  
                           "id":25,
                           "name":"Romania",
                           "parent_id":11,
                           "lr":","
                        }
                     ],
                     "lr":","
                  },
                  {  
                     "id":12,
                     "name":"Sweden",
                     "parent_id":2,
                     "lr":","
                  },
                  {  
                     "id":16,
                     "name":"Italy",
                     "parent_id":2,
                     "lr":","
                  },
                  {  
                     "id":17,
                     "name":"Czech",
                     "parent_id":2,
                     "lr":","
                  },
                  {  
                     "id":18,
                     "name":"Denmark",
                     "parent_id":2,
                     "lr":","
                  },
                  {  
                     "id":19,
                     "name":"Rest of the world",
                     "parent_id":2,
                     "lr":","
                  },
                  {  
                     "id":36,
                     "name":"Middle East",
                     "parent_id":2,
                     "children":[  
                        {  
                           "id":21,
                           "name":"Russia",
                           "parent_id":36,
                           "lr":","
                        }
                     ],
                     "lr":","
                  },
                  {  
                     "id":38,
                     "name":"Africa",
                     "parent_id":2,
                     "children":[  
                        {  
                           "id":49,
                           "name":"Algeria",
                           "parent_id":38,
                           "lr":","
                        },
                        {  
                           "id":50,
                           "name":"Morocco",
                           "parent_id":38,
                           "lr":","
                        }
                     ],
                     "lr":","
                  },
                  {  
                     "id":48,
                     "name":"Belgium",
                     "parent_id":2,
                     "lr":","
                  }
               ],
               "lr":","
            },
            {  
               "id":45,
               "name":"International Branch",
               "parent_id":1,
               "lr":","
            },
            {  
               "id":46,
               "name":"APAC Branch",
               "parent_id":1,
               "children":[  
                  {  
                     "id":51,
                     "name":"Singapore",
                     "parent_id":46,
                     "lr":","
                  },
                  {  
                     "id":52,
                     "name":"China",
                     "parent_id":46,
                     "lr":","
                  },
                  {  
                     "id":53,
                     "name":"Vietnam",
                     "parent_id":46,
                     "lr":","
                  },
                  {  
                     "id":54,
                     "name":"Indonesia",
                     "parent_id":46,
                     "lr":","
                  },
                  {  
                     "id":55,
                     "name":"India",
                     "parent_id":46,
                     "lr":","
                  },
                  {  
                     "id":56,
                     "name":"Malaysia",
                     "parent_id":46,
                     "lr":","
                  }
               ],
               "lr":","
            }
         ],
         "lr":","
      }
   ]
}

我正在尝试使用我创建的这个函数迭代它：

buildHierarchy(item) {
    zone.children.forEach((child) => {
        this.buildHierarchy(child);
    })
}

在我的渲染函数中进一步调用它：

render() {
    ...
    if (zones[0]) {
        this.buildHierarchy(zones);
        ...
    }
    ...
}

然而，当它击中没有孩子的物品时会中断。我怎样才能让它发挥作用？

Answer 1

在使用forEach之前检查儿童：

buildHierarchy(zone) {
    if(zone && zone.children) 
       zone.children.forEach(child => { this.buildHierarchy(child) })
}

我认为存在不匹配问题，您需要在zone方法中接收item而不是buildHierarchy。

检查此代码：

let data = {
   "data":[
      {
         "id":1,
         "name":"EU Group",
         "parent_id":null,
         "children":[
            {
               "id":2,
               "name":"EMEA Branch",
               "parent_id":1,
               "children":[
                  {
                     "id":5,
                     "name":"UK",
                     "parent_id":2,
                     "lr":","
                  },
                  {
                     "id":6,
                     "name":"France",
                     "parent_id":2,
                     "lr":","
                  },
                  {
                     "id":7,
                     "name":"Germany",
                     "parent_id":2,
                     "lr":","
                  },
                  {
                     "id":8,
                     "name":"Spain",
                     "parent_id":2,
                     "lr":","
                  },
                  {
                     "id":9,
                     "name":"Finland",
                     "parent_id":2,
                     "lr":","
                  },
                  {
                     "id":10,
                     "name":"Hungary",
                     "parent_id":2,
                     "lr":","
                  },
                  {
                     "id":11,
                     "name":"Poland",
                     "parent_id":2,
                     "children":[
                        {
                           "id":25,
                           "name":"Romania",
                           "parent_id":11,
                           "lr":","
                        }
                     ],
                     "lr":","
                  },
                  {
                     "id":12,
                     "name":"Sweden",
                     "parent_id":2,
                     "lr":","
                  },
                  {
                     "id":16,
                     "name":"Italy",
                     "parent_id":2,
                     "lr":","
                  },
                  {
                     "id":17,
                     "name":"Czech",
                     "parent_id":2,
                     "lr":","
                  },
                  {
                     "id":18,
                     "name":"Denmark",
                     "parent_id":2,
                     "lr":","
                  },
                  {
                     "id":19,
                     "name":"Rest of the world",
                     "parent_id":2,
                     "lr":","
                  },
                  {
                     "id":36,
                     "name":"Middle East",
                     "parent_id":2,
                     "children":[
                        {
                           "id":21,
                           "name":"Russia",
                           "parent_id":36,
                           "lr":","
                        }
                     ],
                     "lr":","
                  },
                  {
                     "id":38,
                     "name":"Africa",
                     "parent_id":2,
                     "children":[
                        {
                           "id":49,
                           "name":"Algeria",
                           "parent_id":38,
                           "lr":","
                        },
                        {
                           "id":50,
                           "name":"Morocco",
                           "parent_id":38,
                           "lr":","
                        }
                     ],
                     "lr":","
                  },
                  {
                     "id":48,
                     "name":"Belgium",
                     "parent_id":2,
                     "lr":","
                  }
               ],
               "lr":","
            },
            {
               "id":45,
               "name":"International Branch",
               "parent_id":1,
               "lr":","
            },
            {
               "id":46,
               "name":"APAC Branch",
               "parent_id":1,
               "children":[
                  {
                     "id":51,
                     "name":"Singapore",
                     "parent_id":46,
                     "lr":","
                  },
                  {
                     "id":52,
                     "name":"China",
                     "parent_id":46,
                     "lr":","
                  },
                  {
                     "id":53,
                     "name":"Vietnam",
                     "parent_id":46,
                     "lr":","
                  },
                  {
                     "id":54,
                     "name":"Indonesia",
                     "parent_id":46,
                     "lr":","
                  },
                  {
                     "id":55,
                     "name":"India",
                     "parent_id":46,
                     "lr":","
                  },
                  {
                     "id":56,
                     "name":"Malaysia",
                     "parent_id":46,
                     "lr":","
                  }
               ],
               "lr":","
            }
         ],
         "lr":","
      }
   ]
}

function buildHierarchy(item){
   console.log('name', item.name);
   if(item && item.children){        
        item.children.forEach(el=>buildHierarchy(el));
    }
}

buildHierarchy(data.data[0]);