Parsing JSON from array of arrays in Javascript

Question

I have the following code that worked (past tense) great!

$(function() {
  var data = [{
    "day": "06/19/2016",
    "region": "Ohio",
    "metric": "98.61"
  }, {
    "day": "06/19/2016",
    "region": "Western NE",
    "metric": "98.63"
  }, {
    "day": "07/19/2016",
    "region": "Ohio",
    "metric": "68.61"
  }, {
    "day": "07/19/2016",
    "region": "Western NE",
    "metric": "32.63"
  }, {
    "day": "08/19/2016",
    "region": "Ohio",
    "metric": "98.61"
  }, {
    "day": "08/19/2016",
    "region": "Western NE",
    "metric": "48.63"
  }]

  var exist, index, options = {
    xAxis: {
      categories: []
    },
    series: []
  }
  Highcharts.each(data, function(p, i) {
    exist = false;
    if (options.xAxis.categories.indexOf(p.day) < 0) {
      options.xAxis.categories.push(p.day)
    }
    Highcharts.each(options.series, function(s, j) {
      if (s.name === p.region) {
        exist = true;
        index = j;
      }
    });
    if (exist) {
      options.series[index].data.push(parseFloat(p.metric))
    } else {
      options.series.push({
        name: p.region,
        data: [parseFloat(p.metric)]
      })
    }
  })
  $('#container').highcharts(options);
});

I have a fiddle for it here.... https://jsfiddle.net/wilkiejane/sr5dpaft/

Unfortunately vendor changed the format of the JSON and everything is broken and I'm not sure how to parse it.

It changed from [{},{},{}] to [[{}],[{}],[{}]]. Looks like several arrays now instead just one.

So now my data looks like this...

  var data = [[{
    "day": "06/19/2016",
    "region": "Ohio",
    "daily_er": "98.61"
  }],[{
    "day": "06/19/2016",
    "region": "Western NE",
    "daily_er": "98.63"
  }],[{
    "day": "07/19/2016",
    "region": "Ohio",
    "daily_er": "68.61"
  }],[{
    "day": "07/19/2016",
    "region": "Western NE",
    "daily_er": "32.63"
  }],[{
    "day": "08/19/2016",
    "region": "Ohio",
    "daily_er": "98.61"
  }],[{
    "day": "08/19/2016",
    "region": "Western NE",
    "daily_er": "48.63"
  }]
]

Does anyone know how I would iterate over this change? I'll keep banging away but so far I have spent a few hours on it with not much to show for it.

The simplest fix: add `p = p[0]` right after `Highcharts.each(data, function(p, i) {`. — JJJ, Sep 08 '16 at 11:37
Check this fiddle from juhana reference https://jsfiddle.net/eradi_singh/sr5dpaft/7/ coincidently i was working with sameview — black_pottery_beauty, Sep 08 '16 at 11:40

gaetanoM · Answer 1 · 2016-09-09T18:26:32.107

2

If you need the old format you may always convert the new format to the old one using Array.map().

var data = [[{
  "day": "06/19/2016",
  "region": "Ohio",
  "daily_er": "98.61"
}],[{
  "day": "06/19/2016",
  "region": "Western NE",
  "daily_er": "98.63"
}],[{
  "day": "07/19/2016",
  "region": "Ohio",
  "daily_er": "68.61"
}],[{
  "day": "07/19/2016",
  "region": "Western NE",
  "daily_er": "32.63"
}],[{
  "day": "08/19/2016",
  "region": "Ohio",
  "daily_er": "98.61"
}],[{
  "day": "08/19/2016",
  "region": "Western NE",
  "daily_er": "48.63"
}]
];

//
// Convert new format to old format
//
data = data.map(function(ele, index) {
  return ele[0];
});

console.log(data);

edited Sep 09 '16 at 18:26

answered Sep 08 '16 at 11:43

gaetanoM

41,594
6
42
61

This of course assumes that the first element in each sub-arrays is all you care about. I'm not sure why the vendor would wrap each object in an array if there wasn't a chance that each sub-array could have more than one element. If there can be more than one item in a sub-array you might need to change the structure of your `each` loop instead. Depending on the meaning of each sub-array you might just be able to flatten the array using `reduce` and then process it the same way you used to. – Useless Code Sep 09 '16 at 12:10
@UselessCode You are right. But if i may permit, I suggest you to read comments where a fast solution was suggested: use p[0] instead of p in your loop. I'm sure the OP stopped on this. Moreover, there is this question about how to flatten arrays http://stackoverflow.com/questions/10865025/merge-flatten-an-array-of-arrays-in-javascript In any case thank you so much for your time. – gaetanoM Sep 09 '16 at 13:21

score 0 · Answer 2 · answered Sep 08 '16 at 11:47

You can access the first element of each array by using p[0], where the array is p. Of course, if you use that on your code you'd be assuming that each array does contain one element and you'd only be accessing the first element of each array.

A way to make it more "universal" and future-proof is to run a loop for each array. Check the working fiddle below: https://jsfiddle.net/sr5dpaft/9/

I run a for loop through every element on each p array and do the logic for each existing element.

Parsing JSON from array of arrays in Javascript

2 Answers2