How can I return the property values of a nested JavaScript array nested in an object from JSON?

Question

Given a JS array containing many objects which all contain arrays:

var data = [ 
   {id: 1, name: "Fred", pages:[{url:"www.abc.com", title: "abc"}]}, 
   {id: 2, name: "Wilma", pages:[{url:"www.123.com", title: "123"}]}, 
   {id: 3, name: "Pebbles", pages:[{url:"www.xyz.com", title: "xyz"}]}
];

How do I efficiently extract the inner most array (pages) values into an array?

var dataArray = [
    {url: "www.abc.com", title: "abc"}, 
    {url: "www.123.com", title: "123"}, 
    {url: "www.xyz.com", title: "xyz"}
    ]

Answer 1

The easiest way to do this is to use Array#map like so:

var dataArray = data.map(function(o){return o.pages});

If pages is an array of objects (not a single object), this will result in an array of arrays, which you will need to flatten out for example using Array#reduce:

dataArray = dataArray.reduce(function(a,b){return a.concat(b)}, []); 

Answer 2

You are looking for a flatMap

var data = [ 
   {id: 1, name: "Fred", pages:[{url:"www.abc.com", title: "abc"}]}, 
   {id: 2, name: "Wilma", pages:[{url:"www.123.com", title: "123"}]}, 
   {id: 3, name: "Pebbles", pages:[{url:"www.xyz.com", title: "xyz"}]}
];

const concat = (xs, ys) => xs.concat(ys);

const prop = x => y => y[x];

const flatMap = (f, xs) => xs.map(f).reduce(concat, []);

console.log(
  flatMap(prop('pages'), data)
);

Answer 3

If by "efficiently" you actually mean "concisely", then

[].concat(...data.map(elt => elt.pages))

The data.map will result in an array of pages arrays. The [].concat(... then passes all the pages arrays as parameters to concat, which will combine all of their elements into a single array.

If you are programming in ES5, the equivalent would be

Array.prototype.concat.apply([], data.map(function(elt) { return elt.pages; }))

Answer 4

Here's a working example on how to achieve what you want:

var data = [ 
   {id: 1, name: "Fred", pages:[{url:"www.abc.com", title: "abc"}, {url:"www.google.com", title: "Google"}]}, 
   {id: 2, name: "Wilma", pages:[{url:"www.123.com", title: "123"}]}, 
   {id: 3, name: "Pebbles", pages:[{url:"www.xyz.com", title: "xyz"}]}
];

var arr = Array();
var arr2 = Array();

// You can either iterate it like this:
for (var i = 0; i < data.length; i++) {
  // If you only want the first page in your result, do:
  // arr.push(data[i].pages[0]);

  // If you want all pages in your result, you can iterate the pages too:
  for (var a = 0; a < data[i].pages.length; a++) {
    arr.push(data[i].pages[a]);
  }
}

// Or use the array map method as suggested dtkaias 
// (careful: will only work on arrays, not objects!)
//arr2 = data.map(function (o) { return o.pages[0]; });

// Or, for all pages in the array:
arr2 = [].concat(...data.map(function (o) { return o.pages; }));

console.log(arr);
console.log(arr2);
// Returns 2x [Object { url="www.abc.com",  title="abc"}, Object { url="www.123.com",  title="123"}, Object { url="www.xyz.com",  title="xyz"}]

Answer 5

use array map() & reduce() method :

var data = [ 
   {id: 1, name: "Fred", pages:[{url:"www.abc.com", title: "abc"}]}, 
   {id: 2, name: "Wilma", pages:[{url:"www.123.com", title: "123"}]}, 
   {id: 3, name: "Pebbles", pages:[{url:"www.xyz.com", title: "xyz"}]}
];
    
var dataArray = data.map(function(item) {
  return item.pages;
});    

dataArray = dataArray.reduce(function(a,b) {
  return a.concat(b);
}, []);

console.log(dataArray);