Javascript nested array transformation

Question

I'm trying to get my head around Javascript array functions. I have a nested array like this, where every row covers the same time period:

[{
 "category": "fruit",
 "variety": "apple",
 "data": [{
 "day": 1,
 "units": 2
 }, {"day": 2,
 "units": 4
 }]
},{
 "category": "fruit",
 "variety": "orange",
 "data": [{
 "day": 1,
 "units": 3
 }, {"day": 2,
 "units": 5
 }]
},{
 "category": "veg",
 "variety": "tomato",
 "data": [{
 "day": 1,
 "units": 4
 }, {"day": 2,
 "units": 2
 }]
}]

I would like to sum the units by day by category, to get an array like this:

[{
 "category": "fruit",
 "data": [{
 "day": 1,
 "units": 5
 }, {"day": 2,
 "units": 9
 }]
},{
 "category": "veg",
 "data": [{
 "day": 1,
 "units": 4
 }, {"day": 2,
 "units": 2
 }]
}]

I've been tackling this through long looping if statements, and making a bit of a hash of it. Can you see an elegant way to solve this?

Many thanks!

Answer 1

The solution is pretty obvious: Loop through the array, and store the data in a key-value pair. Then, loop through the has, and construct the resulting array using Array.prototype.map. Finally, if you want a nicely formatted JSON-string, use JSON.stringify(result, null, 4);, where 4 is the number of spaced for pretty formatting.

Demo: http://jsfiddle.net/jde6S/

var list = [ ... ];
var hash = {};
for (var i=0; i<list.length; i++) {
 var obj = list[i];
 // This part makes sure that hash looks like {fruit:[], veg: []}
 var hashObjCat = hash[obj.category];
 if (!hashObjCat) {
 hashObjCat = hash[obj.category] = {};
 }
 // This part populates the hash hashObjCat with day-unit pairs
 for (var j=0; j<obj.data.length; j++) {
 var data = obj.data[j];
 if (hashObjCat[data.day]) hashObjCat[data.day] += data.units;
 else hashObjCat[data.day] = data.units;
 }
}
// Now, we hash looks like {fruit: {1:5, 2:9} }
// Construct desired object
var result = Object.keys(hash).map(function(category) {
 // Initial object
 var obj = {category: category, data:[]};
 var dayData = Object.keys(hash[category]);
 // This part adds day+units dicts to the data array
 for (var i=0; i<dayData.length; i++) {
 var day = dayData[i];
 var units = hash[category][day];
 obj.data.push({day: day, units: units});
 }
 return obj;
});
// Test:
console.log(JSON.stringify(result, null, 4));

• Bergi: Nice: What you've done with loops, I used reduce for; and where I used loops you use map over Object.keys :-)
• Rob W: I deliberately used for-loops, because that's easier to port to other langiuages if you're unfamiliar with JavaScript. The goal of my answer was readable code. I undid your edit, because I used intermediate variables to show the logical steps (and like real language, I prefer to mix multiple approaches. Using multiple Object.keys(..).maps looks a bit repetitive :p).
• Bergi: OK, yet I'd say that code should use only one approach, even if beeing repetitive (wait, could a very-high-level function help here?). If you once understood how map() works, that section needs no extra explanation at all :-)
• Derek Hill: Great stuff Rob. Really useful perspective, and great discussion with Bergi to help me understand the options.

Answer 2

reduce the array to an object (See @RobW's answer on how to do that with loops):

var data = [...] // your input 
// Iterate the data with reduce...
var sumsbycategory = data.reduce(function(map, fruit) {
 var cat = fruit.category;
 // set an property to an object, iterating the days array...
 map[cat] = fruit.data.reduce(function(sums, day) {
 var d = day.day;
 // set or update the units for this day
 sums[d] = (sums[d] || 0) + day.units;
 return sums; // into the next iteration
 }, map[cat] || {}) // ...passing in the already existing map for this cat or a new one
 return map; // into the next iteration
}, {}); // ...passing in an empty object

Now we have the following format:

{"fruit":{"1":5,"2":9},"veg":{"1":4,"2":2}}

...which I think is much easier to handle, but lets build your array:

var result = []; // init array
for (var cat in sumsbycategory) { // loop over categories
 var data = []; // init array
 // add category object:
 result.push({category:cat, data:data});
 for (var day in sumsbycategory[cat]) // loop over days in category
 // add day object
 data.push({day:day, units:sumsbycategory[cat][day]});
}

But, wait! An object has no order, and it could happen that day2 comes before days1 in the result array (which might break your appplication?) So, you could use map on the keys of that object which also can be sorted before, to generate the array in one clean-looking expression:

var result = Object.keys(sumsbycategory).map(function(cat) {
 return {
 category: cat,
 data: Object.keys(sumsbycategory[cat])
 .sort(function numbercompare(a,b){ return a-b; })
 .map(function(day) {
 return {
 day: day,
 units: sumsbycategory[cat][day]
 };
 })
 };
});

result:

[{
 "category": "fruit",
 "data": [{"day":"1","units":5},{"day":"2","units":9}]
 },{
 "category": "veg",
 "data": [{"day":"1","units":4},{"day":"2","units":2}]
}]

(Demo at jsfiddle.net)

• Rob W: Can you explain the role of the various sections by adding comments to the code? That would make it more readable, and easier to maintain.
• Bergi: I think the best documentation of such <s>simple</s> concise code would be english explanation of what it does for the whole function (the text given in the OPs question), together with the JSON examples. The map-function imho does need no comments at all, it would only repeat the very expressive code.
• Derek Hill: Thanks. This is incredibly helpful. There could not be a better tutorial on map, reduce and Object.keys. The discussion between yourself & Rob also really helps to understand the different approaches. I'm torn on which answer to accept but I think I'm going to have to give it to Rob based on the extra touch of the jsfiddle demo. Thanks again!
• Bergi: Found an error in the map function (and also created a fiddle, if that is what you want :-)

Answer 3

If you're willing to grab some external code and use it to essentially re-index your structure you could probably do something. I know the old dojo data api was a mess to work with, but could allow something like what you seem to be asking.

Personally I'd stick with loops, just keep your variable names readable. Also remember the object literals can be addressed as either an array/hash syntax x[y] or dot syntax x.y