Parsing JSON using jQuery's each from array of arrays

Question

Note: Heavily updated. Getting there slowly but surely ( mostly slowly )

I have an array of arrays JSON that I need to parse from a remote machine but I put a structural example in my javascript.

It's an array of arrays that I need to extract an epoch value from called "epochtime" ( x-axis ) and "errors" ( y-axis ). "nodes" can be ignored. My code is below... fiddle is here: https://jsfiddle.net/wilkiejane/uLuwazu3/4/

  var data = [
    [{
      "epochtime": 1470456000000,
      "errors": 2,
      "nodes": 5
    }],
    [{
      "epochtime": 1470484800000,
      "errors": 7,
      "nodes": 8
    }],
    [{
      "epochtime": 1470715200000,
      "errors": 10,
      "nodes": 11
    }],
    [{
      "epochtime": 1470855600000,
      "errors": 15,
      "nodes": 4
    }],
    [{
      "epochtime": 1470866400000,
      "errors": 10,
      "nodes": 6
    }],
    [{
      "epochtime": 1471024800000,
      "errors": 12,
      "nodes": 14
    }]
  ]

  var options = {
    chart: {
      renderTo: 'container',
      type: 'spline'
    },
    xAxis: {
      categories: []
    },
    series: [{
            name: 'Errors',
          data: []
    }]
  }

   Highcharts.each(data, function(i,ecs) {
       options.xAxis.categories.push(ecs.epochtime);
       options.series.data.push(parseFloat(ecs.errors));
  });

  $('#container').highcharts(options);

I know for a fact that the graph isn't drawing due to my parsing of the JSON. When I comment out the Highcharts.each...

  Highcharts.each(data, function(i,ecs) {
       options.xAxis.categories.push(ecs.epochtime);
       options.series.data.push(parseFloat(ecs.errors));
  });

and verbosely specify the categories and data options like this.....

  var options = {
    chart: {
      renderTo: 'container',
      type: 'spline'
    },
    xAxis: {
      categories: [1470456000000,1470484800000,1470715200000,1470855600000,1470866400000,1471024800000]
    },
    series: [{
            name: 'Errors',
          data: [2,7,10,15,10,12]
    }]
  }

It looks great, so clearly my issue is trying to pull the "epochtime" and "errors" values out. Any advice would be really appreciated.

I have an array of arrays JSON that I need well, no, you have an array of arrays, there's no json. but, i'm unsure why you have an array of arrays rather than an array of objects, considering each subarray only has one item, an object. if you had an array of objects, your code would likely work as-is. — user400654
– user400654, Commented Sep 8, 2016 at 21:36

Grzegorz Blachliński · Accepted Answer · 2016-09-09 09:27:34Z

1

It all depends on how you would like to show the data in your chart. You should have datetime axis if you want to show dates on it (not the category axis). If you want to have one series with points from the data provided by you, here you can find code how you can add this data to your chart:

  var options = {
    xAxis: {
      type: 'datetime'
    },
    series: [{
      data: []
    }]
  }
  Highcharts.each(data, function(p, i) {
    for (var i = 0; i < p.length; i++) {
      options.series[0].data.push(
        [p[i].timeBucket, parseFloat(p[i].errors)]
      );
    }
  });

Here you can find live example how your chart may work: https://jsfiddle.net/uLuwazu3/17/

answered Sep 9, 2016 at 9:27

Grzegorz Blachliński

5,24213 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Parsing JSON using jQuery's each from array of arrays

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related