JavaScript从其他嵌套对象填充嵌套对象

Question

我对JavaScript很陌生，现在我正在学习不同的教程。为了可视化d3js图，我喜欢重构一个小数据集，以便d3.layout.stack()函数可以处理数据。 原始数据集如下所示。它的一系列对象：

var dats = [{ apples: 5, oranges: 10, grapes: 22 }, 
      { apples: 4, oranges: 12, grapes: 28 }, 
      { apples: 2, oranges: 19, grapes: 32 }, 
      { apples: 7, oranges: 23, grapes: 35 }, 
      { apples: 23, oranges: 17, grapes: 43 } 
      ]; 

目标对象应如下所示。

var finaldats = [ 
      [{ x: 0, y: 5 }, 
      { x: 1, y: 4 }, 
      { x: 2, y: 2 }, 
      { x: 3, y: 7 }, 
      { x: 4, y: 23 } 
      ], 
      [{ x: 0, y: 10 }, 
      { x: 1, y: 12 }, 
      ... 

我的方法迄今：

var inner = {} 
     inner["x"] ; 
     inner["y"] ; 

     dats.forEach(function(d,i) { 
      inner["x"] = i 
      inner["y"] = dats[i].apples; 
     }); 

这产生：它的对象的数组的数组Object {x: 4, y: 23} 它总是输入数组，这是很好的，因为对象是最后一个元素在每次迭代中不断重写。 目前我无法推送这些对象，在每次迭代中创建到一个数组中。

我想到了这样的事情，但它不工作：

var inner = {} 
      inner["x"] ; 
      inner["y"] ; 
var outer = []; 

     dats.forEach(function(d,i) { 
      inner["x"] = i 
      inner["y"] = dats[i].apples; 
      outer.push(inner); 
     }); 

Answer 1

使用map：

的图（）方法创建调用的结果的新阵 为此数组中的每个元素提供了函数。

var dats = [{ apples: 5, oranges: 10, grapes: 22},    
 
     { apples: 4, oranges: 12, grapes: 28}, 
 
     { apples: 2, oranges: 19, grapes: 32}, 
 
     { apples: 7, oranges: 23, grapes: 35}, 
 
     { apples: 23, oranges: 17, grapes: 43} 
 
     ]; 
 

 
var inner = dats.map(function(d, i) { 
 
    return { 
 
    x: i, 
 
    y: d.apples 
 
    } 
 

 
}); 
 

 
document.write('<pre>' + JSON.stringify(inner, 0, 4) + '</pre>');

编辑： 要获得所有按键的结果，你可以使用下面的代码片段：

var dats = [{ apples: 5, oranges: 10, grapes: 22},    
 
      { apples: 4, oranges: 12, grapes: 28}, 
 
      { apples: 2, oranges: 19, grapes: 32}, 
 
      { apples: 7, oranges: 23, grapes: 35}, 
 
      { apples: 23, oranges: 17, grapes: 43} 
 
      ]; 
 

 
var inner = dats.map((o) => { 
 
    return Object.keys(o) 
 
}).reduce((prev, curr) => { 
 
    return prev.concat(curr) 
 
}).filter((col, i, array) => { 
 
    return array.indexOf(col) === i 
 
}).map(function(k) { 
 
    return dats.map(function(a, i) { 
 
    return { 
 
     x: i, 
 
     y: a[k] 
 
    }; 
 
    }); 
 
}); 
 

 
document.write('<pre>' + JSON.stringify(inner, 0, 4) + '</pre>');

了解更多关于map

Answer 2

而其他解决方案的特点只是解决方案的一部分，这里与用于键的阵列和两个嵌套Array#map()，一个用于密钥['apples', 'oranges', 'grapes']，一个用于在dats的值的完整解决方案。

var dats = [{ apples: 5, oranges: 10, grapes: 22 }, { apples: 4, oranges: 12, grapes: 28 }, { apples: 2, oranges: 19, grapes: 32 }, { apples: 7, oranges: 23, grapes: 35 }, { apples: 23, oranges: 17, grapes: 43 }], 
 
    finaldats = ['apples', 'oranges', 'grapes'].map(function (k) { 
 
     return dats.map(function (a, i) { 
 
      return { x: i, y: a[k] }; 
 
     }); 
 
    }); 
 

 
document.write('<pre>' + JSON.stringify(finaldats, 0, 4) + '</pre>');