循環瀏覽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);