[英]lodash: combine array of objects
在lodash中,我想将一个对象数组转换为一个包含每个属性数组的对象。
我有一个对象数组:
var students = [{
name: 'A',
idNo: 1,
marks: {
math: 98,
sci: 97,
eng: 89
}
}, {
name: 'B',
idNo: 2,
marks: {
math: 88,
sci: 87,
eng: 79
}
}, {
name: 'C',
idNo: 3,
marks: {
math: 87,
sci: 98,
eng: 91
}
}]
我想像这样组合/重塑它们:
{
name: [A, B, C],
idNo: [1, 2, 3],
marks: [{
math: 98,
sci: 97,
eng: 89
}, {
math: 88,
sci: 87,
eng: 79
}, {
math: 87,
sci: 98,
eng: 91
}
}]
}
我希望这完全是用lodash或js内置函数完成的,没有任何循环。
编辑:我已经按照Nenad的建议实施了一个解决方案。 我想在lodash中使用实用程序功能。
你可以使用lodash的mapValues函数:
var result = _.mapValues(students[0], (value, key) => _.map(students, key));
mapValues
使用与作为第一个参数传递给它的对象相同的键创建一个对象。 这里我们传递学生数组students[0]
的第一个对象,因此mapValues
返回的对象看起来像这样:
{
name: ....,
idNo: ....,
marks: ....
}
每个键的值由传递给mapValues
作为第二个参数的函数确定。 mapValues
将为每个键调用此函数并传递值和键。 我们对该值不感兴趣,但是该键用于为该键中的student
数组中的所有值(通过使用键作为第二个参数调用map )。
var students = [{ name: 'A', idNo: 1, marks: { math: 98, sci: 97, eng: 89 } }, { name: 'B', idNo: 2, marks: { math: 88, sci: 87, eng: 79 } }, { name: 'C', idNo: 3, marks: { math: 87, sci: 98, eng: 91 } }] var result = _.mapValues(students[0], (value, key) => _.map(students, key)); document.getElementById('result').textContent = JSON.stringify(result);
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.15.0/lodash.min.js"></script> <p> <pre id="result"></pre> </p>
您可以使用带扩展运算符的_.mergeWith()
将数组中的所有对象合并到一个新对象:
const students = [{"name":"A","idNo":1,"marks":{"math":98,"sci":97,"eng":89}},{"name":"B","idNo":2,"marks":{"math":88,"sci":87,"eng":79}},{"name":"C","idNo":3,"marks":{"math":87,"sci":98,"eng":91}}]; const result = _.mergeWith({}, ...students, (objValue, srcValue) => (objValue || []).concat(srcValue)); console.log(result);
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.16.4/lodash.min.js"></script>
在旧浏览器中,您可以将所有参数连接到单个数组,并使用_.spread()
:
var students = [{"name":"A","idNo":1,"marks":{"math":98,"sci":97,"eng":89}},{"name":"B","idNo":2,"marks":{"math":88,"sci":87,"eng":79}},{"name":"C","idNo":3,"marks":{"math":87,"sci":98,"eng":91}}]; var result = _.spread(_.mergeWith)([{}].concat(students, function(objValue, srcValue){ return (objValue || []).concat(srcValue); })); console.log(result);
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.16.4/lodash.min.js"></script>
您可以使用reduce()
和forEach()
来获得所需的结果。
var students = [{"name":"A","idNo":1,"marks":{"math":98,"sci":97,"eng":89}},{"name":"B","idNo":2,"marks":{"math":88,"sci":87,"eng":79}},{"name":"C","idNo":3,"marks":{"math":87,"sci":98,"eng":91}}]; var result = students.reduce(function(r, e) { Object.keys(e).forEach(function(k) { if (!r[k]) { r[k] = []; } r[k].push(e[k]) }) return r; }, {}) console.log(result)
你可以用一个简单的方法来做;
var students = [{ name: 'A', idNo: 1, marks: { math: 98, sci: 97, eng: 89 } }, { name: 'B', idNo: 2, marks: { math: 88, sci: 87, eng: 79 } }, { name: 'C', idNo: 3, marks: { math: 87, sci: 98, eng: 91 } }], result = students.reduce((p,c) => (p.name.push(c.name), p.idNo.push(c.idNo), p.marks.push(c.marks), p), {name:[], idNo:[], marks:[]}); console.log(result);
只是另一个带有_.mergeWith
lodash示例
var students = [{ name: 'A', idNo: 1, marks: { math: 98, sci: 97, eng: 89 } }, { name: 'B', idNo: 2, marks: { math: 88, sci: 87, eng: 79 } }, { name: 'C', idNo: 3, marks: { math: 87, sci: 98, eng: 91 } }], result = {}; _.forEach(students, v => _.mergeWith(result, v, (o, s) => !_.isArray(o) ? [s] : o.concat(s))); console.log(result);
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.15.0/lodash.min.js"></script>
使用.reduce (collection,[iteratee = .identity],[accumulator])的另一个lodash示例。
collection (Array|Object)
:要迭代的集合。 [iteratee=_.identity] (Function)
:每次迭代调用的函数。 [accumulator] (*)
:初始值。 码:
var students = [{name: 'A', idNo: 1, marks: { math: 98, sci: 97, eng: 89}}, {name: 'B', idNo: 2, marks: { math:88, sci: 87, eng: 79}}, {name: 'C', idNo: 3, marks: { math: 87, sci: 98, eng: 91}}], obj = _.reduce(students, function(o, item) { o.name.push(item.name); o.idNo.push(item.idNo); o.marks.push(item.marks); return o; }, {name: [], idNo: [], marks: []}); console.log(obj);
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.15.0/lodash.min.js"></script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.