How to convert a JSON structure into an array of arrays?

Question

I have a json response like follow,

[  
 {  
   "Value":"80,120"
 },
 {  
   "value2":"117,120"
 },
 {  
   "value3":"105,111"
 },
 {  
   "value4":"40,77"
 },
 {  
   "value5":"27,44"
 }
]

How to form this json structure in to a table to dynamically draw a barchart? Right now I'am statically mentioning the values here.

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['value', '80', '120'],
    ['value1', '70', '300'],
    ['value2', '90', '400'],
    ['value3', '100', '230']
  ]);

WhiteHat · Accepted Answer · 2018-09-11 11:48:27Z

if you're planning to draw a google chart with that data,
you'll need to convert the values from strings to numbers.

from...

['value', '80', '120'],

to...

['value', 80, 120],

otherwise, you will receive the following error...

Data column(s) for axis #0 cannot be of type string

you can use the map method, as suggested in the other answers,
use parseFloat or parseInt to convert the strings to numbers.

the following will work...

    var dataObj = [
      {
        "Value":"80,120"
      },
      {
        "value2":"117,120"
      },
      {
        "value3":"105,111"
      },
      {
        "value4":"40,77"
      },
      {
        "value5":"27,44"
      }
    ];

    var dataArray = dataObj.map(function (row) {
      var keys = Object.keys(row);
      var values = row[keys[0]].split(',');
      return [keys[0], parseFloat(values[0]), parseFloat(values[1])];
    });

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

also, since the array data does not include column headings,
you will need to use true for the "first row is data" argument in arrayToDataTable,
which is the second argument...

var data = google.visualization.arrayToDataTable(dataArray, true);

following is a working example using a google chart...

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var dataObj = [
    {
      "Value":"80,120"
    },
    {
      "value2":"117,120"
    },
    {
      "value3":"105,111"
    },
    {
      "value4":"40,77"
    },
    {
      "value5":"27,44"
    }
  ];

  var dataArray = dataObj.map(function (row) {
    var keys = Object.keys(row);
    var values = row[keys[0]].split(',');
    return [keys[0], parseFloat(values[0]), parseFloat(values[1])];
  });

  var data = google.visualization.arrayToDataTable(dataArray, true);

  var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
  chart.draw(data);
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

Thank you so much for this detailed explanation & code. You are lifesaver! Thanks a lot. @WhiteHat

Robby Cornelissen · Accepted Answer · 2018-09-11 09:41:50Z

1

The one-liner below will do it, using Array.prototype.map(), Object.entries(), String.prototype.split(), array destructuring and spread syntax:

const data = json.map(e => ([[k, v]] = Object.entries(e), [k, ...v.split(',')]));

Here's a complete snippet:

const json = [{
    "value": "80,120"
  },
  {
    "value2": "117,120"
  },
  {
    "value3": "105,111"
  },
  {
    "value4": "40,77"
  },
  {
    "value5": "27,44"
  }];
  
const data = json.map(e => ([[k, v]] = Object.entries(e), [k, ...v.split(',')]));

console.log(data);

edited Sep 11, 2018 at 9:41

answered Sep 11, 2018 at 9:36

Robby Cornelissen

98.6k23 gold badges154 silver badges180 bronze badges

Comments

cнŝdk · Accepted Answer · 2018-09-11 09:50:51Z

0

You can use a combination of Array#map(), Object.keys() and Object.values(), like this:

const data = json.map(function(a) {
  return [...Object.keys(a), ...Object.values(a)[0].split(",")];
});

Demo:

const json = [{
    "value": "80,120"
  },
  {
    "value2": "117,120"
  },
  {
    "value3": "105,111"
  },
  {
    "value4": "40,77"
  },
  {
    "value5": "27,44"
  }
];

const data = json.map(function(a) {
  return [...Object.keys(a), ...Object.values(a)[0].split(",")]
});

console.log(data);

answered Sep 11, 2018 at 9:50

cнŝdk

32.2k7 gold badges62 silver badges81 bronze badges

Collectives™ on Stack Overflow

How to convert a JSON structure into an array of arrays?

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related