How to access nested objects within an array in the following example using Javascript "map" method?

Question

How do I access the following keys within this array of objects using the 'map' method? I want to access:

'id' inside 'moreInfo'
'fore' inside 'distances'

I get undefined for the following fields when I use

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

. I want to use the 'map' method itself so that I can render this content in my React application.

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"
        }
      }
    ]
  }
];

There are two objects in the array, the first one doesn't have moreInfo, the second one does have it. — Wiktor Zychla
– Wiktor Zychla, Commented Jul 20, 2020 at 10:58
Your object is probably wrong, moreInfo should be inside the first object, not as a second array element. — Roberto Zvjerković
– Roberto Zvjerković, Commented Jul 20, 2020 at 11:00
@ritaj this is how I am getting the object. If you can re-structure this, can you tell me? I add in the same in my mock server — hrishikakkad
– hrishikakkad, Commented Jul 20, 2020 at 11:01

Vivek Jain · Accepted Answer · 2020-07-20 11:07:04Z

Try this.

    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);
  });

Siva Kondapi Venkata · Accepted Answer · 2020-07-20 11:09:23Z

Actually you data array of objects and each object has different props. You can use destructuring with default values.

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 })
);

Collectives™ on Stack Overflow

How to access nested objects within an array in the following example using Javascript "map" method?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related