循环浏览json数组属性

Question

我正在使用JQuery，ChartJS，Moment.js以JSON格式为同一页面上的多个图表收集数据，但来自同一个JSON源。在JSON中，高度对象是一个图形，另一个是另一个长度。 这是对JSON的样子

"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 
     } 
    ] 
} 

我已经通过JSON管理，以循环显示每个图的例如，但我真的不能够做到这一点使用“DRY - 不要重复自己“的方式。现在我有大块难以更新/阅读的代码块。

$.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 
       }); 
}); 

---

现在我有这样的代码在switch语句中的“高度”，“长度”等等......我的猜测是一种可怕的方式来做到这一点。但是我一直无法为各个图表制作一个循环。

我已经试过这样的事情：

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

但我无法得到它的工作，要遍历data.Series. /heights/lengths../ [i]

我非常感谢的提示如何做到这一点。

谢谢！

Answer 1

如果你用代替measurement并且摆脱hasOwnProperty(measurement)的东西，你就快到了。您需要的唯一方法就是将对象列表转换为每个系列的一组日期和值列表，以便将对象列表转换为一组日期和值。

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将包含这样的：

{ 
    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 
     ] 
    } 
} 

所以，你可以使用它们像这样：

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