Javascript:通过lodash、下划线或corejavascript转换对象响应数组
Javascript: Transform array of object response via lodash or underscore or corejavascript
我正在使用highChart创建柱状图。我是如何通过与数据库通信来创建以下数组的。
现在,我需要将下面的对象的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
});
});
在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);
<script src="https://cdn.jsdelivr.net/lodash/4.13.1/lodash.min.js"></script>
我使用纯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"])
有一种方法可以用reduce
迭代一次数组,甚至不用lodash。
source.reduce((p, n) => {
(p[n.name] || (p[n.name] = [])).push(n.data);
return p
}, {})
相关文章:
- 如何在JavaScript中将字符串转换为函数引用
- 如何在Javascript中将JSon对象转换为数组
- 使用JS将数组转换为json对象
- 如何使用json将对象列表从java转换为javascript
- 偶尔结结巴巴地说“;堆叠的”;translate()上的转换(v4.0.0-alpha40)
- 为什么在单独的函数中应用时转换会闪烁/断断续续(D3)
- 在Javascript中转换对象数组
- 将数字转换为一定数量的硬币
- 将纯文本URL转换为可单击链接
- 当图像转换为本地存储的DataURL时,EXIF被删除
- 如何使用js将SNAPSHOT内部版本号转换为3位数的整数
- 如何将TypeScript对象转换为普通对象
- 检测个位数整数时正在转换毫秒
- 从javascript到jquery的转换
- DOM事件通过JSON转换为java
- 将圆柱体转换为弯管
- 混合 ui-sref 和 $state.go 在 Angular ui-router 中进行状态转换
- JavaScript代码问题:我正在将对象转换为数组
- 如何将字母转换为二进制代码
- 将XML转换为普通的旧JavaScript对象