JSON array elements as individual array

Question

Say I have a JSON like the structure bellow

[{
    "name": "name1",
    "custitem_color": "3",
    "custitem_ribbon": "1",
    "baseprice": "10.00",
    "cost": "12.00"
}, {
    "name": "name2",
    "custitem_color": "4",
    "custitem_ribbon": "2",
    "baseprice": "20.00",
    "cost": "15.00"
}, {
    "name": "name3",
    "custitem_color": "6",
    "custitem_ribbon": "3",
    "baseprice": "30.00",
    "cost": "22.00"
}, {
    "name": "name4",
    "custitem_color": "8",
    "custitem_ribbon": "4",
    "baseprice": "40.00",
    "cost": "18.00"
}]

I want to generate the output as bellow

"name": ["name1","name2","name3"],  
"custitem_color":["3","4","6","8"]

I searched over SO but didn't get a match of this type. I'm curious to know if is there any library or workaround to get all the key's value as a separate array like the above I've mentioned. Any suggestions or point to any resource would be greatly appreciated.

possible duplicate of [Loop through JavaScript object](http://stackoverflow.com/questions/684672/loop-through-javascript-object) — Luizgrs, Feb 11 '15 at 10:47
Although it arrived later, the answer by @Rory McCrossan is much easier to read and cleaner (better use of `var` *inside* the for loops). You may want to switch accepted answers. — iCollect.it Ltd, Feb 11 '15 at 11:11

Oleksandr T. · Answer 1 · 2015-02-11T11:02:52.457

2

Try this

var result = {},
    len    = data.length, i, prop;

for (i = 0; i < len; i++) {
  for (prop in data[i]) {
    if (!result[prop]) {
      result[prop] = [];
    }

    result[prop].push(data[i][prop]);
  }
}

Example

edited Feb 11 '15 at 11:02

answered Feb 11 '15 at 10:48

Oleksandr T.

76,493
17
173
144

score 2 · Accepted Answer · answered Feb 11 '15 at 10:51

You can do this with two loops. One to loop over each object within the array, and the other to loop over the properties of each individual object. From there you can build a new object containing the grouped values. Try this:

var output = {};
for (var i = 0; i < data.length; i++) {
    for (var item in data[i]) {
        output[item] ? output[item].push(data[i][item]) : output[item] = [data[i][item]];
    }
}

Example fiddle

This method has the benefit of being completely agnostic of the format of the input objects. If you add a new property, or the format is dynamic, the code will not need any changes.

score 0 · Answer 3 · answered Feb 11 '15 at 10:51

how about this

var a = [  {"name":"name1", "custitem_color":"3", "custitem_ribbon":"1", "baseprice":"10.00", "cost":"12.00"}, {"name":"name2", "custitem_color":"4", "custitem_ribbon":"2", "baseprice":"20.00", "cost":"15.00"}, {"name":"name3", "custitem_color":"6", "custitem_ribbon":"3", "baseprice":"30.00", "cost":"22.00"}, {"name":"name4", "custitem_color":"8", "custitem_ribbon":"4", "baseprice":"40.00", "cost":"18.00"} ]

var finalobj = {name : [],custitem_color : [],custitem_ribbon : [],baseprice : [],cost : []};
$.each(a,function(pos,val){
    finalobj.name.push(val.name);
    finalobj.custitem_color.push(val.custitem_color);
    finalobj.custitem_ribbon.push(val.custitem_ribbon);
    finalobj.baseprice.push(val.baseprice);
    finalobj.cost.push(val.cost);
})

console.log(finalobj);

You missed a trick there. The names are in the properties, so you did not need to hard-wire the array names. (and according to an SO comment, the values are dynamic so this will not work) — iCollect.it Ltd, Feb 11 '15 at 10:58

score 0 · Answer 4 · answered Feb 11 '15 at 10:52

var final_json = {"name":[],
           "custitem_color":[],
           "custitem_ribbon":[],
           "baseprice":[],
           "cost":[]
};

var init_json = [  {  
           "name":"name1",
           "custitem_color":"3",
           "custitem_ribbon":"1",
           "baseprice":"10.00",
           "cost":"12.00"
        },
        {  
           "name":"name2",
           "custitem_color":"4",
           "custitem_ribbon":"2",
           "baseprice":"20.00",
           "cost":"15.00"
        },
        {  
           "name":"name3",
           "custitem_color":"6",
           "custitem_ribbon":"3",
           "baseprice":"30.00",
           "cost":"22.00"
        },
        {  
           "name":"name4",
           "custitem_color":"8",
           "custitem_ribbon":"4",
           "baseprice":"40.00",
           "cost":"18.00"
        }
     ] ;


$.each(init_json ,function(pos,val){
    final_json.name.push(val.name);
    final_json.custitem_color.push(val.custitem_color);
    final_json.custitem_ribbon.push(val.custitem_ribbon);
    final_json.baseprice.push(val.baseprice);
    final_json.cost.push(val.cost);
})

You missed a trick there. The names are in the properties, so you did not need to hard-wire the array names. (and according to an SO comment, the values are dynamic so this will not work) — iCollect.it Ltd, Feb 11 '15 at 10:57

JSON array elements as individual array

4 Answers4