Javascript append array into object with key

Question

I have data like this:

[{ team: 'Team1',
     wins: 1,
     group: GroupA
},{ team: 'Team2',
     wins: 1,
     group: GroupA
},{ team: 'Team3',
     wins: 1,
     group: GroupB
},{ team: 'Team4',
     wins: 1,
     group: GroupB
}]

I want it in this form (I basically want to group the data by some value, in this case "group" and use that value as a key in an object of arrays):

{ GroupA: [{'Team1', wins: 1, group: GroupA},{'Team2', wins: 1, group: GroupA}],
GroupB: [{'Team3', wins: 1, group: GroupB},{'Team4', wins: 1, group: GroupB}]
}

How can I accomplish this?

Here is what I tried and which almost worked, but returns objects:

var newStats = {}
     arrTeamStats.map(function(key,idx){

                var arr = [];

                if(newStats[key.group] == undefined) {
                    arr = key;
                    newStats[key.group] = arr;
                } else {
                else {
                    group = key.group;
                    newStats[group].push(key);
                }
           }

Harsh Gupta · Accepted Answer · 2018-01-15 21:23:41Z

4

You need to reduce your array to return an Object.

arrTeamStats.reduce(function(h, o) {
  h[o.group] = h[o.group] || []
  h[o.group].push(o)
  return h
}, {})

HTH

edited Jan 15, 2018 at 21:23

answered Jan 15, 2018 at 21:17

Harsh Gupta

4,5582 gold badges28 silver badges31 bronze badges

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

2 Comments

mo_maat Over a year ago

Thanks. I forgot to mention I want a vanilla javascript solution. I don't mind some of the newer syntax but I want to the plain one too.

Harsh Gupta Over a year ago

Changed. Force of habit.

score 1 · Accepted Answer · 2018-01-16 00:24:40Z

1

First, you're misunderstanding .map(). It's not a general purpose iterator, but rather is used to create a new array from the content of an existing one.

What you can do is simply iterate and add new properties to an object as they're located, and consolidate the content.

var data = [{ team: 'Team1',wins: 1,group: "GroupA"},{ team: 'Team2',wins: 1,group: "GroupA"},{ team: 'Team3',wins: 1,group: "GroupB"},{ team: 'Team4',wins: 1,group: "GroupB"}];

var result = {};
for (const o of data) {
  if (result.hasOwnProperty(o.group)) result[o.group].push([o]);
  else result[o.group] = [[o]];
}

console.log(result);

Or a little more concise like this:

var data = [{ team: 'Team1',wins: 1,group: "GroupA"},{ team: 'Team2',wins: 1,group: "GroupA"},{ team: 'Team3',wins: 1,group: "GroupB"},{ team: 'Team4',wins: 1,group: "GroupB"}];

var result = {};
for (const o of data) result[o.group] = (result[o.group] || []).concat([[o]]);

console.log(result);

edited Jan 16, 2018 at 0:24

answered Jan 15, 2018 at 21:18

user8897421

7 Comments

mo_maat Over a year ago

How can I tweak this to get { "GroupA": [{ "team": "Team1", "wins": 1, "group": "GroupA" }], [{ "team": "Team2", "wins": 1, "group": "GroupA" }], "GroupB": [{ "team": "Team3", "wins": 1, "group": "GroupB" }], [{ "team": "Team4", "wins": 1, "group": "GroupB" }] }

user8897421 Over a year ago

@mo_maat: That's the result it currently gives. I'm not seeing any difference. Can you explain what you mean?

mo_maat Over a year ago

It's maybe hard to notice but it is different. I need separate arrays for the elements within the group: So GroupA: [{element1}], [{element2}] instead of GroupA: [{element1}, {element2}]

user8897421 Over a year ago

Oh, I see. That won't work because it's not a valid structure. You'd need to wrap each individual array in an array that holds them all.

{ "GroupA": [[{ "team": "Team1", "wins": 1, "group": "GroupA" }], [{ "team": "Team2", "wins": 1, "group": "GroupA" }]], "GroupB": ...

user8897421 Over a year ago

... GroupA: [[{element1}], [{element2}]], GroupB: ...

|

JellyRaptor · Accepted Answer · 2018-01-15 21:20:20Z

0

If you're inclined to use something like Lodash, you could use _.groupBy as follows:

var input = [{ team: 'Team1',
     wins: 1,
     group: 'GroupA'
},{ team: 'Team2',
     wins: 1,
     group: 'GroupA'
},{ team: 'Team3',
     wins: 1,
     group: 'GroupB'
},{ team: 'Team4',
     wins: 1,
     group: 'GroupB'
}];

var output = _.groupBy(input, 'group');
console.log(output);

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js"></script>

answered Jan 15, 2018 at 21:20

JellyRaptor

7551 gold badge9 silver badges20 bronze badges

Collectives™ on Stack Overflow

Javascript append array into object with key

3 Answers 3

2 Comments

7 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related