Using jQuery / JavaScript, how would I group values ​​in an array of objects and create a new array of objects from groups

Question

I have an array of JSON objects like this

var dataSet1 = [{ "id": "1", "engine": "Trident", "browser": "Internet Explorer 4.0", "platform": "Win 95+", "version": "5", "grade": "X" }, { "id": "2", "engine": "Trident", "browser": "Internet Explorer 4.0", "platform": "Win 95+", "version": "5", "grade": "A" }, { "id": "3", "engine": "Trident", "browser": "Internet Explorer 4.0", "platform": "Win 95+", "version": "4", "grade": "X" }, { "id": "4", "engine": "Trident", "browser": "Internet Explorer 4.0", "platform": "Win 95+", "version": "5", "grade": "A" }]; 

I would like to skip this dataset and create a new array of objects that combine objects with similar properties of the class and keep a list of the corresponding id and version values ​​this way

OLD Objects with a grade property of 'X'

 { "id": "1", "engine": "Trident", "browser": "Internet Explorer 4.0", "platform": "Win 95+", "version": "5", "grade": "X" } { "id": "3", "engine": "Trident", "browser": "Internet Explorer 4.0", "platform": "Win 95+", "version": "4", "grade": "X" } 

NEW An object with a 'grade' property equal to 'X'

 { "ids":{"id":"1","id":"3"} "engine": "Trident", "browser": "Internet Explorer 4.0", "platform": "Win 95+", "versions":{ "version":"4", "version":"5"} "grade": "X" } 

I am sure that I need to use the $ .each and $ .grep function, for example,

  $.each(dataSet1, function (index, value) { tsaGrade = dataSet1[index].grade; result = $.grep(dataSet1, function (e) { return e.grade == tsaGrade; }) 

and placing identifiers and versions in new arrays, but I'm losing information on how to prevent each loop from being excluded from the values ​​that are already grouped in the next loop using a dataset.

Answer 1

If you want to use Underscore.js , this becomes pretty trivial.

Assuming data is your initial list of json objects, this will cause you to after:

 var groups = []; var by_grade = _.groupBy(data, function(obj) { return obj['grade'] }); _.each(by_grade, function(objs, grade) { var group = {}; group['grade'] = grade; group['ids'] = _.pluck(objs, 'id'); group['versions'] = _.pluck(objs, 'version'); // Use the following if the value is known to be // the same for all grouped objects group['platform'] = objs[0]['platform']; // And the rest... groups.push(group); }); 

_.groupBy() groups your objects into classes, as a result, two objects with the keys X and A appear, the values ​​of which are lists of objects with the corresponding classes. Then you can pluck over each of the two lists of objects, pluck enter the required values ​​so that they are added to the list for the new object. It's hard to describe in full, but see the log messages on this feed :)

Edit

Instead of objs['platform'] , use objs[0]['platform'] for all attributes that, as you know, are the same for elements with the same class.

Edit 2

Based on this, the best approach instead of _.each is probably _.map :

 groups = _.map(by_grade, function(objs, grade) { return { grade: grade, browsers: _.pluck(objs, 'browser'), ids: _.pluck(objs, 'id'), versions: _.pluck(objs, 'id'), engines: _.pluck(objs, 'engine') // etc } }); 

Fiddle