new javascript array from returned JSON

Question

I've got some JSON data being returned from a REST call that I want to parse, add totals, then spit out arrays with new data. I've got the parsing, looping, and adding figured out, and can write the results on the page (see post: json sibling data), but I want to further break down the totals. Here's the JSON I'm starting with:

{"ResultSet":{

    "Result":[

    {
        "file_size":"722694",
        "desc":"description1",
        "format":"GIF"
    },

    {
        "file_size":"19754932",
        "desc":"description1",
        "format":"JPEG"
    },

    {
        "file_size":"778174",
        "desc":"description2",
        "format":"GIF"
    },

    {
        "file_size":"244569996",
        "desc":"description1",
        "format":"PNG"
    },

    {
        "file_size":"466918",
        "desc":"description2",
        "format":"TIFF"
    }

  ]

}}

I've got it returning the totals for each different "desc" (see answer: https://stackoverflow.com/a/13016615/1766026), but now I want to break it down one step further and show totals for each "desc" with each "format" so the new output would look like:

description1: 444MB (222MB TIFF, 111MB GIF, 111MB JPEG)

description2: 333MB (111MB PNG, 111MB TIFF, 111MB JPEG)

where not all returned items have the same kinds of file formats.

(yes, I know these numbers do not add up from the JSON - it's just an example)

I'm thinking this can be done by pushing the results to a new array(s) based on matching elements then iterating over that and spitting out to the page.

Maybe the new array(s)/object(s) would look like this?

{
    "desc":"description1",
    "TIFF":"222",
    "GIF:"111",
    "JPEG:"111"
},
{
    "desc":"description2",
    "PNG":"111",
    "TIFF:"111",
    "JPEG":"111"
}

I just saw this: How do I create JavaScript array (JSON format) dynamically? I guess that would be one place to start?

(please pardon possible improper terminology - I do mostly front-end work and this kind of stuff is pretty new to me - polite constructive criticisms gladly accepted)

Answer 1

Yes. Iterate the array and build your objects from it.

var arr = parsedObj.ResultSet.Result;

var byDesc = {}; // an object as a key-value-map
for (var i=0; i<arr.length; i++) {
    var desc = arr[i].desc,
        format = arr[i].format;
    if (! (desc in byDesc))
        byDesc[desc] = {};
    if (! (format in byDesc[desc]))
        byDesc[desc][format] = 0;
    byDesc[desc][format] += (+arr[i].file_size); // parseInt
}

now we've got an object with filesizes by format and description:

{"description1":{"GIF":722694,"JPEG":19754932,"PNG":244569996},"description2":{"GIF":778174,"TIFF":466918}}

to get the desired output, we just enumerate this object:

var output = [];
for (var desc in byDesc) {
    var total = 0,
        formats = [];
    for (var format in byDesc[desc]) {
        formats.push(Math.round(byDesc[desc][format]/1000)+"MB "+format);
        total += byDesc[desc][format];
    }
    output.push(desc+": "+Math.round(total/1000)+"MB ("+formats.join(", ")+")");
}
return output.join("\n");

and we get

description1: 265048MB (723MB GIF, 19755MB JPEG, 244570MB PNG)
description2: 1245MB (778MB GIF, 467MB TIFF)