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：

map（）方法创建一个新数组，其中包含调用a的结果为此数组中的每个元素提供了函数。

＆＃13;

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

＆＃13;

修改：要获得所有密钥的结果，您可以使用以下代码段：

＆＃13;
＆＃13;
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>');
＆＃13;
＆＃13;
＆＃13;

详细了解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>');

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

2 个答案: