Lodash：将数组转换为 angularjs nvd3 Multibarchart 数据答案

【问题标题】：Lodash: convert array to angularjs nvd3 Multibarchart dataLodash：将数组转换为 angularjs nvd3 Multibarchart 数据
【发布时间】：2018-10-01 15:39:31
【问题描述】：

我想将从 api 获取的 apiArray 转换为 AngularJS NVD3 MultiBarChart 数据格式。

$scope.apiArray = [{"date":"2018-07-05T05:05:39.732Z","id":2"count":1},{"date":"2018-07-05T05:05:39.732Z","id": 3,"count": 1},"date": "2018-07-06T05:05:39.732Z","id": 2,"count": 1}, {"date": "2018-07-06T05:05:39.732Z","id": 4,"count": 2}

使用 Lodash 库，其中 key 是我的 id，到 ->

$scope.data = [{"key":"2", "values":[{"date": "2018-07-05T05:05:39.732Z", "count": "1"},{"date": "2018-07-06T05:05:39.732Z", "count": "1"}]},{"key":"3", "values":[{"date": "2018-07-05T05:05:39.732Z", "count": "1"}]},{"key":"4", "values":[{"date": "2018-07-06T05:05:39.732Z", "count": "2"}]}]

有什么解决办法吗？我想将我的 apiArray 提供给 AngularJS NVD3 以创建 Multibar 图表。

【问题讨论】：

标签： angularjs lodash nvd3.js angularjs-nvd3-directives

【解决方案1】：

您可以简单地使用_.groupBy 和_.map 来实现这一目标

_(data).groupBy('id').map((values, key) => ({key, values})).value()

首先由'id' 分组，它将返回一个对象，其中键将是唯一的 ID，每个值都将是一个包含所有对象的数组有那个id
然后将它（每个键/值）映射到具有键key and values 的对象，键将包含唯一的 id，值将是具有的对象该 id（我们在 _.groupBy 中针对每个唯一 id 获得的信息，简单地使用它）

var data = [{ "date": "2018-07-05T05:05:39.732Z", "id": 2, "count": 1 }, { "date": "2018-07-05T05:05:39.732Z", "id": 3, "count": 1, }, { "date": "2018-07-06T05:05:39.732Z", "id": 2, "count": 1 }, { "date": "2018-07-06T05:05:39.732Z", "id": 4, "count": 2 } ];

var res = _(data)
          .groupBy('id')
          .map((values, key) => ({ key, values}))
          .value();
          
console.log(res);

&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.min.js"&gt;&lt;/script&gt;

【讨论】：

【解决方案2】：

这应该可以帮助你：

var data = [{ "date": "2018-07-05T05:05:39.732Z", "id": 2, "count": 1 }, { "date": "2018-07-05T05:05:39.732Z", "id": 3, "count": 1, }, { "date": "2018-07-06T05:05:39.732Z", "id": 2, "count": 1 }, { "date": "2018-07-06T05:05:39.732Z", "id": 4, "count": 2 } ]

const result = _(data)
   .groupBy(x => x.id)
   .entries()
   .map(x => ({ key: x[0], values: x[1]}))
   .value()
console.log(result)

&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.10/lodash.min.js"&gt;&lt;/script&gt;

我们使用链接，然后按（通过groupBy）id 分组，然后使用entries 以数组形式获取内容，然后将map 获取到预期的对象结果。

【讨论】：