Looping through json array properties

Question

I'm using JQuery, ChartJS, Moment.js gathering data in JSON format for multiple charts on the same page, but from the same JSON source. In the JSON the height objects are one graph and the lengths another one. This is an example of how the JSON looks

  "Series": {
    "heights": [
      {
        "Date": "2014-10-01",
        "Value": 22
      },
      {
        "Date": "2014-10-01",
        "Value": 53
      },
      {
        "Date": "2014-10-01",
        "Value": 57
      },
    ],
    "lengths": [
      {
        "Date": "2014-10-01",
        "Value": 54
      },
      {
        "Date": "2014-10-01",
        "Value": 33
      }
    ]
}

I've managed to loop through the JSON to display each graph but I'm not really able to do it using the "DRY - Don't repeat yourself" way. Which now I have large chunks of code that is hard to update/read.

$.getJSON("data.json", function(data) {
                var dateArray = [];
                var valueArray = [];

                for ( var i = 0; i < data.Series["heights"].length; i++) {

                    var obj = data.Series.heights[i];
                    var date = obj["Date"].toString();
                    var Value = obj["Value"];

                    for ( var key in obj) {
                    //console.log(obj["Value"]);
                    //date = obj["Date"];
                    Value = obj[key].toString();

                }
                    valueArray.push(Value);
                    dateArray.push(moment(date).format("MMMM Mo"));

                var dataArray = {
                    labels: dateArray,
                    datasets: [
                    {
                        label: "Lengths",

                        strokeColor: "rgb(26, 188, 156)",
                        pointColor: "rgba(220,220,220,1)",
                        pointStrokeColor: "#fff",
                        pointHighlightFill: "#fff",
                        pointHighlightStroke: "rgba(220,220,220,1)",
                        data: valueArray
                    }
                    ]
                };

                }
                var ctx = document.getElementById("lengthsChart").getContext("2d");
                var myLineChart = new Chart(ctx).Line(dataArray, { 
                    scaleShowGridLines : true, 
                    bezierCurve : true, 
                    bezierCurveTension : 0.4, 
                    datasetStroke : false, 
                    fillColor: "rgba(0,0,0,0)", 
                    datasetFill : false,
                    responsive: true,
                    showTooltips: true,
                    animation: false
                });
});

Right now I have this code in a switch statement for "heights", "lengths" etc... Which I guess is a horrible way to do it. But I've been unable to make a loop for the individual charts.

I've tried things like this:

for(var x in measurement) {
    console.log(measurement[x]);


    for ( var i = 0; i < data.Series.hasOwnProperty(measurement).length; i++) {

        var obj = data.Series.hasOwnProperty(measurement)[i];
        var date = obj["Date"].toString();
        var Value = obj["Value"];

        console.log(date, Value);
    }

But I'm unable to get it to work, to loop through the data.Series. /heights/lengths../ [i]

I'm very thankful for tips how to accomplish this.

Thanks!

If I understand you correctly, you want the heights and lengths arrays from the same json to go through the same code channels and produce a dataArray (output chart object). If so your point of configuration is the attribute key for data.Series. Where do your outputs (dataArray objects) go to? Also are the two arrays' objects always of the same schema, a Date and a Value property? — cbayram
– cbayram, Commented Oct 1, 2014 at 13:08

dreyescat · Accepted Answer · 2014-10-01 15:19:45Z

If you replace measurement with data.Series and get rid of the hasOwnProperty(measurement) thing, you are almost there. The only thing you need is a way to keep the transformation from a list of {Date, Value} objects to a pair of list of dates and value for each serie.

var series = {};
// This loop is looping across all the series.
// x will have all the series names (heights, lengths, etc.).
for (var x in data.Series) {
  var dates = [];
  var values = [];
  // Loop across all the measurements for every serie.
  for (var i = 0; i < data.Series[x].length; i++) {
    var obj = data.Series[x][i];
    // Assuming that all the different series (heights, lengths, etc.) have the same two Date, Value attributes.
    dates.push(obj.Date);
    values.push(obj.Value);
  }
  // Keep the list of dates and values by serie name.
  series[x] = {
    dates: dates,
    values: values
  };
}

series will contain this:

{
    heights: {
        dates: [
            '2014-10-01',
            '2014-10-01',
            '2014-10-01'
        ],
        values: [
            22,
            53,
            57
        ]
    },
    lengths: {
        dates: [
            '2014-10-01',
            '2014-10-01'
        ],
        values: [
            54,
            33
        ]
    }
}

So you can use them like this:

console.log(series);
console.log(series.heights);
console.log(series.heights.dates);
console.log(series.heights.values);
console.log(series.lengths);
console.log(series.lengths.dates);
console.log(series.lengths.values);

Collectives™ on Stack Overflow

Looping through json array properties

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