How to extract value of nested object array?

Question

I'm trying to extract all links IDs of the object array shown below. This is how I was trying to get that:

const linkIDs = array
  .filter(d => d.links)
  .map(d => d.links)

But this gives me a nested array, which is not what I wanted.

[
  {
    "id: "1",
    "links": [
        {
            "id" : "Dn59y87PGhkJXpaiZ",
            "type" : "article"
        },
      {
            "id" : "PGhkJXDn59y87paiZ",
            "type" : "article"
        }
    ]
  },
  {
    "id: "2",
    "links": [
        {
            "id" : "GhkJXpaiZDn59y87P",
            "type" : "article"
        }
    ]
  },
  {
    "id": "3"
  }
]

So in this example I need the result

[ "Dn59y87PGhkJXpaiZ", "PGhkJXDn59y87paiZ", "GhkJXpaiZDn59y87P" ]

Khiem Tran · Accepted Answer · 2017-12-17 04:57:52Z

6

You can do like bellow, without using any other library.

var data = [
  {
    "id": "1",
    "links": [
        {
            "id" : "Dn59y87PGhkJXpaiZ",
            "type" : "article"
        },
       {
            "id" : "PGhkJXDn59y87paiZ",
            "type" : "article"
        }
    ]
  },
  {
    "id": "2",
    "links": [
        {
            "id" : "GhkJXpaiZDn59y87P",
            "type" : "article"
        }
    ]
  },
  {
    "id": "3"
  }
];

var result = data.filter(e => e.links)
                 .map(e => e.links.map(link => link.id))
                 .reduce((a, b) => a.concat(b), []);
                
console.log(result);

answered Dec 17, 2017 at 4:57

Khiem Tran

6,16916 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Franc · Accepted Answer · 2022-10-19 13:33:27Z

2

I propose a more readable syntax in plain JS:

var data = [
  {
    "id": "1",
    "links": [
        {
            "id" : "Dn59y87PGhkJXpaiZ",
            "type" : "article"
        },
       {
            "id" : "PGhkJXDn59y87paiZ",
            "type" : "article"
        }
    ]
  },
  {
    "id": "2",
    "links": [
        {
            "id" : "GhkJXpaiZDn59y87P",
            "type" : "article"
        }
    ]
  },
  {
    "id": "3"
  }
];
var result = data.filter(e => e.links)
                 .map(e => e.links)
                 .flat()
                 .map(e => e.id)
                
console.log(result);

edited Oct 19, 2022 at 13:33

answered Aug 22, 2022 at 14:13

Franc

1221 silver badge5 bronze badges

Comments

taile · Accepted Answer · 2017-12-17 04:58:56Z

2

You need to produce your array before mapping. Reduce in Js is very useful function ;)

arr = [
  {
    "id": "1",
    "links": [
        {
            "id" : "Dn59y87PGhkJXpaiZ",
            "type" : "article"
        },
      {
            "id" : "PGhkJXDn59y87paiZ",
            "type" : "article"
        }
    ]
  },
  {
    "id": "2",
    "links": [
        {
            "id" : "GhkJXpaiZDn59y87P",
            "type" : "article"
        }
    ]
  },
  {
    "id": "3"
  }
];

var result = arr.filter(a=>a.links).reduce((acc, a) => {
 return acc.concat(a.links)
}, []).map(a=>a.id);
console.log(result);

answered Dec 17, 2017 at 4:58

taile

2,77619 silver badges32 bronze badges

Comments

Sajeetharan · Accepted Answer · 2017-12-17 05:00:36Z

0

You can use lodash's flatMap() , where each filtered item is transformed using map().

DEMO

var data = [
  {
    "id": 1,
    "links": [
      {
        "id": "Dn59y87PGhkJXpaiZ",
        "type": "article"
      },
      {
        "id": "PGhkJXDn59y87paiZ",
        "type": "article"
      }
    ]
  },
  {
    "id": "2",
    "links": [
      {
        "id": "GhkJXpaiZDn59y87P",
        "type": "article"
      }
    ]
  },
  {
    "id": "3"
  }
];
var result =  _.flatMap(data, item => 
  _(item.links)
    .map(v => (v.id))
    .value()
);
           
console.log(result);

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.12.0/lodash.js"></script>

edited Dec 17, 2017 at 5:00

answered Dec 17, 2017 at 4:56

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

2 Comments

Khiem Tran Over a year ago

The output is different, also, need to use another lib.

Sajeetharan Over a year ago

@DanielTran Updated, check

Collectives™ on Stack Overflow

How to extract value of nested object array?

4 Answers 4

Comments

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related