Want to split one single JSON objects to multiple JSON objects using Javascript

Question

I have a JSON response like below,

[{label: "8", value: "1", value2: "0", value3: "0"},{label: "9", value: "7", value2: "2", value3: "6"},{label: "10", value: "12", value2: "1", value3: "0"},…]

Now I want to split it into 4 JSON objects for each key, like below.

[{label: "8"},{label: "9"},{label: "10"},…]
[{value: "1"},{value: "7"},{value: "12"},…] 
[{value2: "0"},{value2: "2"},{value2: "1"},…] and more

I tried below things but wasn't successful.

Try1:

var o2 = { uhash: o.uhash };
delete o.uhash;

Try2:

Using for loop to get each pair, array.push and JSON.stringigy() method.

All I want to is create a stacked fusioncharts using the JSON response from database

https://jsfiddle.net/1b21zh1p/1/ – Zubair sadiq May 10 '16 at 14:02 — Zubair sadiq, May 10 '16 at 14:02

omarjmh · Accepted Answer · 2016-05-10T14:30:41.123

1

You could make a function that returns the array you want: You could then map through and call this on the properties in your JSON:

function makeArray(value) {
  return j.map(function(a) {
    return {[value]: a[value]};
  });
}

var labels = makeArray('label');

Working Example

edited May 10 '16 at 14:30

answered May 10 '16 at 13:29

omarjmh

13,632
6
34
42

Nenad Vracar · Answer 2 · 2016-05-10T13:50:36.220

You can use reduce like this and return array

var data = [{label: "8", value: "1", value2: "0", value3: "0"},{label: "9", value: "7", value2: "2", value3: "6"},{label: "10", value: "12", value2: "1", value3: "0"}]

var result = data.reduce(function(ar, e) {
  ar[0] = (ar[0] || []).concat({label: e.label});
  ar[1] = (ar[1] || []).concat({value: e.value});
  ar[2] = (ar[2] || []).concat({value2: e.value2});
  ar[3] = (ar[3] || []).concat({value3: e.value3});
  return ar;
}, [])

console.log(result)

You can also return object

var data = [{label: "8", value: "1", value2: "0", value3: "0"},{label: "9", value: "7", value2: "2", value3: "6"},{label: "10", value: "12", value2: "1", value3: "0"}],
    keys = Object.keys(data[0]);

var result = data.reduce(function(ar, e) {
  ar[keys[0]] = (ar[keys[0]] || []).concat({label: e.label});
  ar[keys[1]] = (ar[keys[1]] || []).concat({value: e.value})
  ar[keys[2]] = (ar[keys[2]] || []).concat({value2: e.value2})
  ar[keys[3]] = (ar[keys[3]] || []).concat({value3: e.value3})
  return ar;
}, {})

console.log(result)

score 1 · Answer 3 · answered Jul 13 '16 at 10:31

Why am i not using Array.prototype.map or Object.keys, because in IE8, this methods are not working. To make them work, need to add Pollyfill in the code. So here is your solution without using them

var yourData = [
      { "label": "8", "value": "1", "value2": "0", "value3": "0" },
      { "label": "9", "value": "7", "value2": "2", "value3": "6" },
      { "label": "10", "value": "12", "value2": "1", "value3": "0" }
    ];

var convertData = function(data) {
  var newData = [],
      dataLnth = data.length;

  //dynamically creating the array depending on arraySize
  for(var i = 0; i<=dataLnth; i++)
    newData.push([]);

  //create the data
  for(var index=0; index<dataLnth; index++) {
    var counter = 1;
    for(var key in data[index]) {
      if(key === "label")
        newData[0].push({"label" : data[index][key]});
      else
        newData[counter++].push({"value" : data[index][key]});
    }
  }

  return newData;
};

//printing the output in the console
console.log(JSON.stringify(convertData(yourData)));

score 0 · Answer 4 · answered May 10 '16 at 13:27

You can use Array#forEach() and build new objects with the wanted properties in it.

var array = [{ label: "8", value: "1", value2: "0", value3: "0" }, { label: "9", value: "7", value2: "2", value3: "6" }, { label: "10", value: "12", value2: "1", value3: "0" }],
    keys = ['label', 'value', 'value2', 'value3'],
    grouped = {};

array.forEach(function (a) {
    keys.forEach(function (k) {
        var o = {};
        o[k] = a[k];
        grouped[k] = grouped[k] || [];
        grouped[k].push(o);
    });
});

document.write('<pre>' + JSON.stringify(grouped, 0, 4) + '</pre>');

score 0 · Answer 5 · answered May 10 '16 at 14:01

I like map() here along with getOwnPropertyNames() though the other answers are probably just as good.

var data = [
  { "label": "8", "value": "1", "value2": "0", "value3": "0" },
  { "label": "9", "value": "7", "value2": "2", "value3": "6" },
  { "label": "10", "value": "12", "value2": "1", "value3": "0" }
];

var results = data.map(function(item) {
  var retval = [];
  Object.getOwnPropertyNames(item).forEach(function(val, idx, array) {
    retval.push({ [val]: item[val] });
  });
  return retval;
});

console.log(JSON.stringify(results));

Want to split one single JSON objects to multiple JSON objects using Javascript

5 Answers5

Linked