如何从嵌套数组中获取单个名称属性？

问题描述

我正在处理 Angular 项目，我需要从给定的嵌套数组对象中获取 name 属性。 我尝试使用 lodash 地图函数 _.map('ArrayName',(o)=>o.name); 在这里我只收到 [ Peter,Andy ] 作为结果。我想要所有名称属性 [Peter,Andy,Mills,mac,Teddy] 像这样。有人可以指导我如何做到这一点。

[{
"id": "1","name": "Peter","children": []},{
"id": "2","name": "Andy","children": [
  {
    "id": "3","name": "Mills","children": []
  },{
    "id": "4","name": "Mac","children": [
      {
        "id": "5","name": "Teddy","children": []
      }
    ]
  }
]}]

解决方法

您是否尝试初始化一个空数组并对其运行 for 循环以推送和填充数组？

let a=[]
for(i of array)
    { a.push(i.name)}
     //Array refers to your JSON objects array

,

您需要递归访问嵌套的 children 数组。

这是一个使用 Array.prototype.flatMap() 和 spread syntax 递归迭代每个子数组并展平结果的示例。

const input = [{ "id": "1","name": "Peter","children": [] },{ "id": "2","name": "Andy","children": [{ "id": "3","name": "Mills",{ "id": "4","name": "Mac","children": [{ "id": "5","name": "Teddy","children": [] }] }] }];

const recursivelyGetProp = (arr,prop) => (
  arr.flatMap(({ children,[prop]: p }) =>
    [p,...(children.length ? recursivelyGetProp(children,prop) : [])]
  ));

console.log(recursivelyGetProp(input,'name'));