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

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

• javascript
• arrays
• ecmascript-6

4 Answers 4

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

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

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

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./ajax/libs/lodash.js/4.12.0/lodash.js"></script>