how do I create an array of objects with array in the object from an object with the same key in javascript

Question

I have an array of objects that looks like this

[{
        "name": "Agile Process",
        "id": 27,
        "score": 3,
        "source": "Self"
    },{
        "name": "Agile Process",
        "id": 27,
        "score": 4,
        "source": "Trainer"
    },{
        "name": "2 & 3 Tier Architecture",
        "id": 37,
        "score": 4,
        "source": "Self"
    },{
        "name": "2 & 3 Tier Architecture",
        "id": 37,
        "score": 5,
        "source": "Trainer"
 }]

I want to be able to produce something like this, I have been trying hard but I do not seems to get a hang of it.

[
    {
        "name": "Agile Process",
        "id": 7,
        "data": [
            {
                "score": 3,
                "source": "Self"
            },{
                "score": 4,
                "source": "Trainer"
            }
        ]
    },
    {
        "name": "2 & 3 Tier Architecture",
         "id": 37,
         "data": [
            {
                "score": 4,
                "source": "Self"
            },{
                "score": 5,
                "source": "Trainer"
            }]
        }
  ];

How do I go about solving this problem?

raina77ow · Accepted Answer · 2015-10-30 13:43:09Z

3

One possible approach:

_.values(_.reduce(arr, function(acc, el) {
  var id = el.id;
  if (!acc.hasOwnProperty(id)) {
    acc[id] = _.pick(el, 'id', 'name');
    acc[id].data = [];
  }
  acc[id].data.push(_.pick(el, 'score', 'source'));
  return acc;
}, {}));

Demo. It's a common method when you need to group things up.

edited Oct 30, 2015 at 13:43

answered Oct 30, 2015 at 13:31

raina77ow

107k16 gold badges205 silver badges240 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Shailendra Sharma Over a year ago

this is really rocket science +1

Valentin S. · Accepted Answer · 2015-10-30 13:38:26Z

2

Here's a pure javascript solution: use reduce method on the initial array using as the accumulator the result array (empty at first) which will store the transformed data. And as reduce method loops through the items of the initial array, check if the result array contains an element with id of the current item. If so, then just add new data to it, else create a new item in the result array.

var data = [{
        "name": "Agile Process",
        "id": 27,
        "score": 3,
        "source": "Self"
    },{
        "name": "Agile Process",
        "id": 27,
        "score": 4,
        "source": "Trainer"
    },{
        "name": "2 & 3 Tier Architecture",
        "id": 37,
        "score": 4,
        "source": "Self"
    },{
        "name": "2 & 3 Tier Architecture",
        "id": 37,
        "score": 5,
        "source": "Trainer"
 }];



var newData = [];

newData = data.reduce(function(acc, current) {
  var existingArr = acc.filter(function(x) { return x.id === current.id });
  if(existingArr.length === 0) {
    acc.push({ name: current.name, id: current.id, data: [{ score: current.score, source: current.source }] });
  }
  else {
    existingArr[0].data.push({ score: current.score, source: current.source });
  }
  return acc;
}, newData);

edited Oct 30, 2015 at 13:38

answered Oct 30, 2015 at 13:27

Valentin S.

5042 silver badges10 bronze badges

2 Comments

Solomon Ayoola Over a year ago

Thanks @all... I will go with this solution... reasons can be found here

Danmoreng Over a year ago

Still this can be improved: jsperf.com/group-object-with-same-key/2 Running the filter function always costs performance, especially if the original array contains many objects. My solution caches the ids which makes it faster.

Gruff Bunny · Accepted Answer · 2015-10-30 13:34:18Z

2

This version uses groupBy to group the items by id and then maps across each grouping to create the required object:

var groupToItem = function(items){
    return {
        id: items[0].id,
        name: items[0].name,
        data: _.map(items, function(item){
            return _.pick(item, 'score', 'source');
        })
    }
 }

 var result = _.chain(data)
    .groupBy('id')
    .map(groupToItem)
    .value();

answered Oct 30, 2015 at 13:34

Gruff Bunny

28k10 gold badges74 silver badges61 bronze badges

Comments

Danmoreng · Accepted Answer · 2015-10-30 13:52:45Z

Plain Javascript solution, only working for your specific data structure though:

function groupObjectsById(array){
    var output = [];
    var ids = [];
    for(var i = 0; i < array.length; i++){
        var current = array[i];
        if(ids.indexOf(current.id) > -1){
            var objInOutput = output.filter(function(obj){
                if(obj.id === current.id){
                    return obj;
                }
            })[0];
            var dataObj = { score: current.score, source: current.source};
            objInOutput.data.push(dataObj);
        }else{
            var outputObject = {name: current.name, id: current.id};
            outputObject.data = [{ score: current.score, source: current.source}];          
            output.push(outputObject);
            ids.push(current.id);
        }
    }
    return output;
}

Collectives™ on Stack Overflow

how do I create an array of objects with array in the object from an object with the same key in javascript

4 Answers 4

1 Comment

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related