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

Frisette

jsfiddle.net/1b21zh1p/1 – Eleanore

Answer 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

Incommunicative

Answer 2

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)

Divisible

Answer 3

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)));

Cornerstone

Answer 4

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>');

Holocaine

Answer 5

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));

Evvoia