Javascript transform array into grouped object by value

Question

I have an array:

["car1-coupe", "car2-convertible", "car2-hatchback", "car2-estate", "car3-hatchback", "car3-estate"]

The array can have different sets of cars, and I want to turn it into something like this:

[{
    car1: ["car1-coupe"]
},{
    car2: ["car2-convertible", "car2-hatchback", "car2-estate"]
},{
    car3: ["car3-hatchback", "car3-estate"]
}]

How can I do this in JavaScript or Underscore?

Do you absolutely need that output? Or can it be slightly different? — Cerbrus
– Cerbrus, Commented Oct 24, 2014 at 14:01
By looping yourself or using map() which will loop internally — Johan
– Johan, Commented Oct 24, 2014 at 14:01
You want to turn it into "something like" that or you want to turn it into precisely that? I don't know why you'd store it that way, personally; seems like it would make more sense to have a single object (abandoning the wrapping array) with three properties: car1, car2 and car3. — Anthony Grist
– Anthony Grist, Commented Oct 24, 2014 at 14:02
What exactly are you having problems with? Iterating over the array? Splitting a string? Adding properties to an object? You matt have tried something and got stuck somewhere... what is it? — Felix Kling
– Felix Kling, Commented Oct 24, 2014 at 14:02
@Cerbrus the output can be different as long as I have the models grouped by cars. Felix My problem is about the grouping — Mauro74
– Mauro74, Commented Oct 24, 2014 at 14:06

Cerbrus · Accepted Answer · 2014-10-24 14:10:00Z

2

So, assuming an array like this:

var a = ["car1-coupe", "car2-convertible", "car2-hatchback", "car2-estate", "car3-hatchback", "car3-estate"];

You can do this:

var b = a.reduce(function(prev, curr){
    var car = curr.split('-')[0]; // "get" the current car
    prev[car] = prev[car] || [];  // Initialize the array for the current car, if necessary.
    prev[car].push(curr);         // Add the current item to the array.
    return prev;
}, {});

This will return the following object:

{
    car1: ["car1-coupe"],
    car2: ["car2-convertible", "car2-hatchback", "car2-estate"],
    car3: ["car3-hatchback", "car3-estate"]
}

answered Oct 24, 2014 at 14:10

Cerbrus

73.3k19 gold badges138 silver badges151 bronze badges

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

5 Comments

Mauro74 Over a year ago

thanks, unfortunately needs to work in IE8, reduce() is works in IE9 onwards, sorry forgot to mention it.

Florian Margaine Over a year ago

@Mauro74 you can easily add a shim.

Cerbrus Over a year ago

No worries, you can find a polyfill for reduce() on the MDN site.

Mauro74 Over a year ago

Ok @Cerbrus I'll use the Polyfill!

Cerbrus Over a year ago

With the polyfill in place, does this answer (and it's output) work for you?

Antoine Combes · Accepted Answer · 2014-10-24 14:29:45Z

0

var array = ["car1-coupe", "car2-convertible", "car2-hatchback", "car2-estate", "car3-hatchback", "car3-estate"];

var result = {};

for (var i = 0; i < array.length; i++) {
  var key = array[i].split('-')[0]; // The car we're interested in
  if (result[key]) { // Check if this car has already been initialized
    result[key].push(array[i]); //add this model to the list
  } else {
    result[key] = [array[i]]; // initialize the array with the first value
  }
}

console.log(result);
/*will return :
{
  car1: ["car1-coupe"],
  car2: ["car2-convertible", "car2-hatchback", "car2-estate"],
  car3: ["car3-hatchback", "car3-estate"]
}
*/

edited Oct 24, 2014 at 14:29

answered Oct 24, 2014 at 14:15

Antoine Combes

1,4448 silver badges13 bronze badges

Comments

Fyre · Accepted Answer · 2014-10-24 14:24:36Z

-1

var  myObj = {}, myArr = [];
for( var i = 0; i < arr.length; i+=1) {
      var key = arr[i].split("-")[0];
      myObj = {};
      myObj[key] = [];
      for( var j = i; j < arr.length; j+=1 ) {
            if( key === arr[j].split("-")[0])
                myObj[key].push(arr[j]);
      }
      myArr.push(myObj);
}

I think this can be done simply with this way. One loop to get the key and another inner loop to get all values of this key.

edited Oct 24, 2014 at 14:24

answered Oct 24, 2014 at 14:12

Fyre

1,1788 silver badges12 bronze badges

1 Comment

Cerbrus Over a year ago

Waaaaaaay too many temporary variables, 2 loops, and no explanation at all. -1

Collectives™ on Stack Overflow

Javascript transform array into grouped object by value

3 Answers 3

5 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related