如何在 Javascript 中将对象数组转换为关联数组对象答案

【问题标题】：How to Convert an Array of Objects into an Object of Associative Arrays in Javascript如何在 Javascript 中将对象数组转换为关联数组对象
【发布时间】：2019-04-06 02:20:12
【问题描述】：

我从系统接收到以下结构。我正在尝试使用 chartjs 将其弯曲成特定图形所需的形式。给定 JSON 数据结构……对象中的对象数组：

{
"chart": [
    {
        "date": "2018-10-29",
        "done": 3,
        "todo": 10

    },
    {
        "date": "2018-10-30",
        "done": 4,
        "todo": 7
    },
    {
        "date": "2018-10-31",
        "done": 5,
        "todo": 12
    }
]

}

我需要所需的 JSON 数据结构...一个数组对象（在一个数组中，在一个对象中）

{
"chart": [{
    "date": [
        "2018-10-29",
        "2018-10-29",
        "2018-10-31"
    ],
    "done": [
        3,
        4,
        5
    ],
    "todo": [
        10,
        7,
        12
    ]
}]

}

我尝试使用 .map 函数，但我似乎没有正确的 map-fu。

【问题讨论】：

Multi-dimensional associative arrays in JavaScript的可能重复

标签： javascript arrays dictionary object chart.js

【解决方案1】：

您可以获取一个对象并在单个数组中获取所有具有这些值的键。

var data = { chart: [{ date: "2018-10-29", done: 3, todo: 10 }, { date: "2018-10-30", done: 4, todo: 7 }, { date: "2018-10-31", done: 5, todo: 12 }] },
    result = { chart: data.chart.reduce((r, o) => {
            Object.entries(o).forEach(([k, v]) => (r[k] = r[k] || []).push(v));
            return r;
        }, {})
    };
    
console.log(result);

.as-console-wrapper { max-height: 100% !important; top: 0; }

【讨论】：

这很完美，正是我所希望的。感谢您的快速回复。

【解决方案2】：

使用 reduce 怎么样？

const output = input.reduce((acc, curr) => ({
  date: acc.date.concat(curr.date),
  done: acc.done.concat(curr.done),
  todo: acc.todo.concat(curr.todo),
}), { date: [], done: [], todo: [] });

const chartData = {
  chart: [output],
};

reduce 的参考在这里：https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/reduce

【讨论】：

【解决方案3】：

这是一个非常明确的解决方案。可能会有一些更流畅的 Javascript 解决方案；当然，您可以进行多次.map 调用，但这会降低效率。

// Variables
var dates = [];
var doneValues = [];
var todoValues = [];

// Loop through the original data once, collect the data.
originalJSON.forEach(function(data) {
  dates.push(data["date"]);
  doneValues .push(data["done"]);
  todoValues .push(data["todo"]);
});

// Put it all together.
return {"chart": [{"date": dates, "done": doneValues , "todo": todoValues}]};

修改它以满足您的需要。

【讨论】：