循环遍历 json 数组属性答案

【问题标题】：Looping through json array properties循环遍历 json 数组属性
【发布时间】：2014-11-26 06:06:54
【问题描述】：

我正在使用 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]

非常感谢您提供如何完成此操作的提示。

谢谢！

【问题讨论】：

如果我理解正确，您希望同一 json 中的 heights 和 lengths 数组通过相同的代码通道并生成一个 dataArray（输出图表对象）。如果是这样，您的配置点是 data.Series 的属性键。你的输出（dataArray 对象）去哪里了？两个数组的对象是否也总是具有相同的模式，一个 Date 和一个 Value 属性？

标签： javascript arrays json properties chart.js

【解决方案1】：

如果你用data.Series 替换measurement 并去掉hasOwnProperty(measurement) 的东西，你就差不多了。您唯一需要的是将 {Date, Value} 对象列表转换为每个系列的一对日期和值列表的方法。

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

【讨论】：