在以下示例中，如何使用 Javascript“map”方法访问数组中的嵌套对象？答案

【问题标题】：How to access nested objects within an array in the following example using Javascript "map" method?在以下示例中，如何使用 Javascript“map”方法访问数组中的嵌套对象？
【发布时间】：2020-07-20 10:56:08
【问题描述】：

如何使用“map”方法访问此对象数组中的以下键？我要访问：

“更多信息”中的“id”
“距离”内的“前”

我在使用时未定义以下字段

a.map((d) => console.log(d.moreInfo.id));

。我想使用 'map' 方法本身，以便我可以在我的 React 应用程序中呈现这些内容。

let a = [
  {
    "Id": "huih23432",
    "name": "Kevin",
    "dob": "26/06/1995",
    "nid": "34535353543",
    "images": {
      "id": "https://picsum.photos/200",
      "nid": "https://picsum.photos/200"
    }
  },
  {
    "moreInfo": [
      {
        "id": "243423423423",
        "dob": "16/07/1990",
        "name": "JD",
        "images": {
          "id": "https://picsum.photos/200",
          "nid": "https://picsum.photos/200"
        },
        "distances": {
          "fore": "0.91",
          "towards": "0.5"
        }
      }
    ]
  }
];

【问题讨论】：

数组中有两个对象，第一个没有moreInfo，第二个有。
您的对象可能是错误的，moreInfo 应该在第一个对象内，而不是作为第二个数组元素。
@ritaj 这就是我获取对象的方式。如果你可以重新构建这个，你能告诉我吗？我在我的模拟服务器中添加了相同的内容

标签： javascript arrays json typescript

【解决方案1】：

试试这个。

    let a = [
        {
                  "Id": "huih23432",
                  "name": "Kevin",
                  "dob": "26/06/1995",
                  "nid": "34535353543",
                  "images": {
                    "id": "https://picsum.photos/200",
                    "nid": "https://picsum.photos/200"
                  }
                },
                {
                  "moreInfo": [
                    {
                      "id": "243423423423",
                      "dob": "16/07/1990",
                      "name": "JD",
                      "images": {
                        "id": "https://picsum.photos/200",
                        "nid": "https://picsum.photos/200"
                      },
                      "distances": {
                        "fore": "0.91",
                        "towards": "0.5"
                      }
                    }
                  ]
                }
        ];
        


  a.filter(d => d.moreInfo)
    .map((d)=>{
      const moreInfoObj =  d.moreInfo.find(y => y.id);
      console.log("'id' inside 'moreInfo': " + moreInfoObj.id);
      console.log("'fore' inside 'distances': " + moreInfoObj.distances.fore);
  });

【讨论】：

【解决方案2】：

实际上你是对象的数据数组，每个对象都有不同的道具。您可以使用带有默认值的解构。

let a = [
  {
    Id: "huih23432",
    name: "Kevin",
    dob: "26/06/1995",
    nid: "34535353543",
    images: {
      id: "https://picsum.photos/200",
      nid: "https://picsum.photos/200",
    },
  },
  {
    moreInfo: [
      {
        id: "243423423423",
        dob: "16/07/1990",
        name: "JD",
        images: {
          id: "https://picsum.photos/200",
          nid: "https://picsum.photos/200",
        },
        distances: {
          fore: "0.91",
          towards: "0.5",
        },
      },
    ],
  },
];

a.map(({ moreInfo: [{ id, distances: { fore } = {} }] = [{}] }) =>
  console.log({ id, fore })
);

【讨论】：