javascript - lodash: combine array of objects - Stack Overflow

admin管理员组

文章数量:1241147

In lodash, I want to convert an array of objects to a single object that contains an array of each property.

I have an array of objects:

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
    }
}]

I want to bine / reshape them like this:

{
    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
        }
    }]
}

I want this to be done purely with lodash or js inbuilt functions without any loops.

Edit : I have already implemented a solution as suggested by Nenad. I want a utility function in lodash.

In lodash, I want to convert an array of objects to a single object that contains an array of each property.

I have an array of objects:

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
    }
}]

I want to bine / reshape them like this:

{
    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
        }
    }]
}

I want this to be done purely with lodash or js inbuilt functions without any loops.

Edit : I have already implemented a solution as suggested by Nenad. I want a utility function in lodash.

• javascript
• arrays
• functional-programming
• lodash

Share Improve this question Follow edited Oct 13, 2016 at 11:06 jgr0 asked Oct 13, 2016 at 10:55 jgr0jgr0 72722 gold badges77 silver badges2121 bronze badges

Add a ment  | 

6 Answers 6

Sorted by: Reset to default 7

You could use lodash's mapValues function:

var result = _.mapValues(students[0], (value, key) => _.map(students, key));

mapValues creates an object with the same keys as the object passed to it as the first parameter. Here we pass the first object in the students array students[0] so the object returned by mapValues will look something like this:

{
    name: ....,
    idNo: ....,
    marks: ....
}

The value for each key is determined by the function that is passed to mapValues as the second parameter. mapValues will call this function for each key and pass the value and the key. We're not interested in the value but the key is used to pluck all the values in the student array for that key (by calling map with the key as the second parameter).

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./ajax/libs/lodash.js/4.15.0/lodash.min.js"></script>

<p>
  <pre id="result"></pre>
</p>

You can merge all objects in the array to a new object using _.mergeWith() with the spread operator:

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./ajax/libs/lodash.js/4.16.4/lodash.min.js"></script>

In older browser's you can concat all parameters to a single array, and use _.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./ajax/libs/lodash.js/4.16.4/lodash.min.js"></script>

You can use reduce() and forEach() to get desired 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}}];

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)

You might do it with a single reduce;

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);

Just another lodash example with _.mergeWith

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./ajax/libs/lodash.js/4.15.0/lodash.min.js"></script>

Another lodash example with .reduce(collection, [iteratee=.identity], [accumulator]).

• collection (Array|Object): The collection to iterate over.
• [iteratee=_.identity] (Function): The function invoked per iteration.
• [accumulator] (*): The initial value.

Code:

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./ajax/libs/lodash.js/4.15.0/lodash.min.js"></script>

本文标签： javascriptlodash combine array of objectsStack Overflow