I have the the following data being returned by my api.

[{"category":"Amazon","month":"Feb","total":9.75},
{"category":"Amazon","month":"Mar","total":169.44},
{"category":"Amazon","month":"Apr","total":10.69},
{"category":"Amazon","month":"May","total":867.0600000000001},
{"category":"Amazon","month":"Jun","total":394.43999999999994},
{"category":"Amazon","month":"Jul","total":787.2400000000001},
{"category":"Amazon","month":"Aug","total":1112.4400000000003},
{"category":"Amazon","month":"Sep","total":232.86999999999998},
{"category":"Amazon","month":"Oct","total":222.26999999999998},
{"category":"Amazon","month":"Nov","total":306.09999999999997},
{"category":"Amazon","month":"Dec","total":1096.2599999999998}]

I want to format it so that the months are all grouped under each category like this:

[{"category":"Amazon","month":{"Jan":9.75,"Feb":9.75,"Mar":9.75,"Apr":9.75,etc...}]

How can I do this with javascript?

What I'm ultimately trying to do is to display some pivoted data in a table. I'm not sure what the best design is to acplish this.

Right now, I'm just setting up a table dynamically and adding in the data corresponding to each row. Are there better design patterns for doing this?

I have the the following data being returned by my api.

[{"category":"Amazon","month":"Feb","total":9.75},
{"category":"Amazon","month":"Mar","total":169.44},
{"category":"Amazon","month":"Apr","total":10.69},
{"category":"Amazon","month":"May","total":867.0600000000001},
{"category":"Amazon","month":"Jun","total":394.43999999999994},
{"category":"Amazon","month":"Jul","total":787.2400000000001},
{"category":"Amazon","month":"Aug","total":1112.4400000000003},
{"category":"Amazon","month":"Sep","total":232.86999999999998},
{"category":"Amazon","month":"Oct","total":222.26999999999998},
{"category":"Amazon","month":"Nov","total":306.09999999999997},
{"category":"Amazon","month":"Dec","total":1096.2599999999998}]

I want to format it so that the months are all grouped under each category like this:

[{"category":"Amazon","month":{"Jan":9.75,"Feb":9.75,"Mar":9.75,"Apr":9.75,etc...}]

How can I do this with javascript?

What I'm ultimately trying to do is to display some pivoted data in a table. I'm not sure what the best design is to acplish this.

Right now, I'm just setting up a table dynamically and adding in the data corresponding to each row. Are there better design patterns for doing this?

• javascript

2 Answers 2

You can reduce the array of objects to an object using the categories as keys, and adding the months, and then map it back to an array again

var arr = [{"category":"Amazon","month":"Feb","total":9.75},
{"category":"Amazon","month":"Mar","total":169.44},
{"category":"Amazon","month":"Apr","total":10.69},
{"category":"Amazon","month":"May","total":867.0600000000001},
{"category":"Amazon","month":"Jun","total":394.43999999999994},
{"category":"Amazon","month":"Jul","total":787.2400000000001},
{"category":"Amazon","month":"Aug","total":1112.4400000000003},
{"category":"Amazon","month":"Sep","total":232.86999999999998},
{"category":"Amazon","month":"Oct","total":222.26999999999998},
{"category":"Amazon","month":"Nov","total":306.09999999999997},
{"category":"Amazon","month":"Dec","total":1096.2599999999998}];

var o = arr.reduce( (a,b) => {
    a[b.category] = a[b.category] || [];
    a[b.category].push({[b.month]:b.total});
    return a;
}, {});

var a = Object.keys(o).map(function(k) {
    return {category : k, month : Object.assign.apply({},o[k])};
});

console.log(a);

I would take the following approach:

1. Write down on a piece of paper how to solve the problem (the "algorithm").
2. Flesh out this algorithm with more details. Sometimes this is called "pseudo-code".
3. Convert the pseudo-code into JavaScript.

For instance, your algorithm might look like this:

1. Create a new thing to hold the results.
2. Loop through the elements in the input.
3. For each element in the input, update the results thing.
4. Return the result.

Sometimes it helps to read out the algorithm aloud to yourself. Or animate the algorithm on a blackboard. Or talk through the algorithm with someone nearby.

The pseudo-code might be:

1. Create a new array containing a new object to hold the results, with a category property set to "Amazon", and a months property set to an empty object.
2. Loop through the elements in the input array.
3. For each element, add a new property to the months property of the results object, whose key is the value of the month property from the element, and whose value is the value of the total property from the element.
4. Return the result.

If you have specific questions about any of those steps, you can research it further, or ask, such as:

1. How do I create a new array, with an object inside?
2. How do I loop through the elements of an array?
3. How do I retrieve a property from an object?
4. How do I add a new key/value pair to an object?
5. How do I return the result?

If you are unfamiliar with any of the terms used above--such as array, object, property, key, value, or element--research them and make sure you know what they mean. Knowing and using correct terminology is the first step to successful programming!

When converting your algorithm into JS, write it step by step, and test it at each phase. For instance, start with a version which doesn't loop over the input at all, and make sure it produces a correct output of [{category: "Amazon", month: {}}]. Walk though your code in the debugger at this and each following step--if you don't know how to use the debugger, learning that should be your first priority! If you want to check a little bit of syntax, to make sure it does what you think, just try it out by typing it into the console. If you don't know what the console is, learning that should be another top priority.

All the above assumes that you've got a single Amazon category. If you are going to have multiple categories, and want multiple objects (one for each) in your output array, then start over from the top and write the algorithm and pseudo-code which can handle that.