How to use Javascript map method to access nested objects?

Question

When I run the below code and try accessing the "id" within images using the map() method, it gives me undefined. Whereas, accessing the reId/name/dob/number is the same as console.log(d.reId)

var data = [
    {
      reId: 'huih23432',
      name: 'skdskdss',
      dob: '26/06/1998',
      number: '34535353543',
      images: {
        "id": 'https://picsum.photos/200',
        "link": 'https://picsum.photos/200',
      },
    },
    {
    "name": "x"
    }


]

data.map((d)=>{
    console.log(d.images.id)
})

I want a solution using map() method itself to access the id | link within "images" key.

you have to add check of key as in second object there is no image key like d && d.image && d.image.id — KCFragrance, Jul 14 '20 at 18:30
Does this answer your question? [Access Javascript nested objects safely](https://stackoverflow.com/questions/18178406/access-javascript-nested-objects-safely) — Emile Bergeron, Jul 14 '20 at 19:07

score 2 · Answer 1 · answered Jul 14 '20 at 18:28

2

You have to return in the map callback

var imageIds = data.map(d=>d.images && d.images.id)
       .filter(id => id); // filter out null elements

answered Jul 14 '20 at 18:28

phnkha

7,782
2
24
31

@phnka this is working. But I am wondering why nested objects are accessible simply with the dot(.) operator? – Hrishikesh D Kakkad Jul 14 '20 at 18:34
I needed something in this format data.map((d)=>{
{d.images.id}
}) For my React code – Hrishikesh D Kakkad Jul 14 '20 at 18:38
this doesn't really work as it returns an array with the id and undefined. can you explain this notation: d=d.images && d.images.id along with .filter(id=>id) – DCR Jul 14 '20 at 18:54

DCR · Accepted Answer · 2020-07-20T11:01:40.653

2

var data = [
    {
      reId: 'huih23432',
      name: 'skdskdss',
      dob: '26/06/1998',
      number: '34535353543',
      images: {
        "id": 'https://picsum.photos/201',
        "link": 'https://picsum.photos/200',
      },
    },
    {
    "name": "x"
    }


]

data.map((d)=>{

    if (typeof d.images != 'undefined') 
    console.log(d.images.id);
})

edited Jul 20 '20 at 11:01

answered Jul 14 '20 at 18:39

DCR

14,737
12
52
115

How to use Javascript map method to access nested objects?

2 Answers2

{d.images.id}

Linked