如何從JSON中返回嵌套在對象中的嵌套JavaScript數組的屬性值？

Question

給出一個包含有許多對象，所有包含數組一個JS數組：

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 = [ 
    {url: "www.abc.com", title: "abc"}, 
    {url: "www.123.com", title: "123"}, 
    {url: "www.xyz.com", title: "xyz"} 
    ] 

Answer 1

做到這一點的最簡單的方法是使用Array#map像這樣：

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

如果pages是對象的數組（不是一個單一的對象）時，這將導致一個數組的數組，您將需要使用Array#reduce拉平例如：

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

Answer 2

下面是關於如何實現工作例如，你想要什麼：

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 3

使用數組map() & reduce()方法：

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

Answer 4

如果 「有效」 你實際上意味着 「簡潔」，然後

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

data.map將產生一個數組pages。然後[].concat(...將所有pages數組作爲參數傳遞給concat，這將將其所有元素組合到一個數組中。

如果您在ES5編程，相當於將

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

Answer 5

你正在尋找一個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) 
 
);