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:

ma​​p() 方法创建一个带有调用结果的新数组 在此数组中的每个元素上提供函数。

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

编辑： 要获得所有密钥的结果，您可以在 sn-p 下使用：

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