如何从JSON返回嵌套在对象中的嵌套JavaScript数组的属性值？

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

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 4

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