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 accomplish 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?
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:
For instance, your algorithm might look like this:
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:
category
property set to "Amazon"
, and a months
property set to an empty object. 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. If you have specific questions about any of those steps, you can research it further, or ask, such as:
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.