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!

Rob W · Accepted Answer · 2012-07-27 20:56:28Z

2

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));

edited Jul 27, 2012 at 20:56

answered Jul 27, 2012 at 20:29

Rob W

350k87 gold badges811 silver badges683 bronze badges

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

4 Comments

Bergi Over a year ago

Nice: What you've done with loops, I used reduce for; and where I used loops you use map over Object.keys :-)

Rob W Over a year ago

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 Over a year ago

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 Over a year ago

Great stuff Rob. Really useful perspective, and great discussion with Bergi to help me understand the options.

Bergi · Accepted Answer · 2012-07-28 08:14:18Z

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)

edited Jul 28, 2012 at 8:14

answered Jul 27, 2012 at 20:37

Bergi

671k162 gold badges1k silver badges1.5k bronze badges

4 Comments

Rob W Over a year ago

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 Over a year ago

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 Over a year ago

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 Over a year ago

Found an error in the map function (and also created a fiddle, if that is what you want :-)

Robert · Accepted Answer · 2012-07-27 20:12:07Z

0

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

answered Jul 27, 2012 at 20:12

Robert

2,44621 silver badges12 bronze badges

Collectives™ on Stack Overflow

Javascript nested array transformation

3 Answers 3

4 Comments

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related