Javascript：通过 lodash 或下划线或 corejavascript 转换对象响应数组答案

【问题标题】：Javascript: Transform array of object response via lodash or underscore or corejavascriptJavascript：通过 lodash 或下划线或 corejavascript 转换对象响应数组
【发布时间】：2016-07-20 16:03:44
【问题描述】：

我正在使用 highChart 创建柱形图。我如何通过与数据库通信来创建以下 arrayofObj。

现在，我需要将 source 对象数组转换为下面的输出。

var source = [
{data: 258, name: '2014'}
{data: 18, name: '2016'}
{data: 516, name: '2014'}
{data: 0, name: '2014'}
{data: 354, name: '2014'}
{data: 18, name: '2016'}
]`

将此对象数组转换为

Output

[{
    name: '2014',
    data: [258, 516, 354]
  }, {
    name: '2016',
    data: [18, 0, 18]
}]

基本上，我希望我的数组按名称（年份）分组，数据应该在数组中

这是我应用的解决方案。

var source = [];
_.each(source, function(singlerec) {
      source.push({
        name: singlerec.name,
        data: singlerec.data  // Here It only assign single record
      });
    });

【问题讨论】：

@T.J.Crowder 谢谢，当然我已经尝试过了，但是你说得对，我已经添加了我的进度问题。
在解决方案的输出中添加错误。此外，您的解决方案看起来并没有根本按name 对事物进行分组。这非常类似于要求其他人为您添加按名称分组。
另外，搜索是您的朋友。 :-) stackoverflow.com/questions/36069213/…, stackoverflow.com/questions/14592799/…, stackoverflow.com/questions/38079037/…
Lodash create collection from duplicate object keys的可能重复
@T.J.Crowder Lodash 非常简洁，解决方案通常是全部或全部。我不认为看到 OP 的尝试会改善问题，只要他们真的进行了真正的尝试。函数式编程可能很难掌握，尤其是当人们试图将其与命令式编程相结合时。

标签： javascript underscore.js lodash

【解决方案1】：

在 Lodash 中，我总是使用_.groupBy 然后_.map 来输出格式。

var source = [{"data":258,"name":"2014"},{"data":18,"name":"2016"},{"data":516,"name":"2014"},{"data":0,"name":"2014"},{"data":354,"name":"2014"},{"data":18,"name":"2016"}];

var output = _(source)
  .groupBy('name')
  .map(function(v, k) { return { name: k, data: _.map(v, 'data') } })
  .value();

console.log(output);

&lt;script src="https://cdn.jsdelivr.net/lodash/4.13.1/lodash.min.js"&gt;&lt;/script&gt;

【讨论】：

【解决方案2】：

我使用纯javascript函数：

const pick = (obj, paths) => ({...paths.reduce((a, k) => ({...a, [k]: obj[k]}), {})})

function groupByAndConcat(data, groupBy, sums) {
    return data.reduce((results, r) => {
        const e = results.find((x) => groupBy.every((g) => x[g] === r[g]));
        if (e) {
            sums.forEach((k) => e[k] = [].concat(e[k], r[k]));
        } else {
            results.push(pick(r, groupBy.concat(sums)));
        }
        return results;
    }, []);
}

因此，鉴于您的示例来源：

const source = [
    {data: 258, name: '2014'},
    {data: 18, name: '2016'},
    {data: 516, name: '2014'},
    {data: 0, name: '2014'},
    {data: 354, name: '2014'},
    {data: 18, name: '2016'},
];

console.log(groupByAndConcat(source, ["name"], ["data"]))

输出：

[{ name: "2014", data: Array [258, 516, 0, 354] }, { name: "2016", data: Array [18, 18] }]

也可以对多个道具进行分组或操作：

groupByAndConcat(source, ["name","month"], ["data","data2"])

【讨论】：

【解决方案3】：

有一种方法可以使用 reduce 甚至不使用 lodash 来迭代数组。

source.reduce((p, n) => {
    (p[n.name] || (p[n.name] = [])).push(n.data);
    return p
}, {})

【讨论】：