使用 Javascript 遍历 JSON

Question

我目前正在学习代码，同时在这里工作，所以我对这一切都是陌生的。我正在尝试使用 AMcharts 制作图表。我需要根据方向制作不同的数据集，将来可能会更多。下面我展示了我当前的 JSON 和我的代码。我遇到的问题是我正在获取数据，但只有最后 2 个测试结果。我想知道我需要调整什么才能获得每组数据。感谢您的帮助。

JSON:

"{"TestSets":{"#text":["\n  ","\n  ","\n"],"TestSet":[{"#text":["\n    ","\n    ","\n    ","\n    ","\n    ","\n    ","\n    ","\n    ","\n    ","\n  "],"TestSetID":{"#text":"TestSet_iOS1"},"Hardware":{"#text":"iPad Air 2"},"Version":{"#text":"iOS 8.1.3"},"Build":{"#text":"2.7.0.920"},"Orientation":{"#text":"PORTRAIT"},"NumTestCases":{"#text":"76"},"NumTestScripts":{"#text":"17"},"TotalTime":{"#text":"33823.411"},"TestResults":{"#text":["\n      ","\n      ","\n      ","\n    "],"TestRun":[{"#text":["\n        ","\n        ","\n        ","\n        ","\n        ","\n        ","\n        ","\n      "],"Date":{"#text":"24 Mar 2015"},"Hardware":{"#text":"iPad Air 2"},"Version":{"#text":"iOS 8.1.3"},"Build":{"#text":"2.7.0.907"},"Orientation":{"#text":"PORTRAIT"},"NumPassed":{"#text":"37"},"NumFailed":{"#text":"31"}},{"#text":["\n        ","\n        ","\n        ","\n        ","\n        ","\n        ","\n        ","\n      "],"Date":{"#text":"27 Mar 2015"},"Hardware":{"#text":"iPad Air 2"},"Version":{"#text":"iOS 8.1.3"},"Build":{"#text":"Pro 2.7.0.915"},"Orientation":{"#text":"PORTRAIT"},"NumPassed":{"#text":"100"},"NumFailed":{"#text":"25"}},{"#text":["\n        ","\n        ","\n        ","\n        ","\n        ","\n        ","\n        ","\n      "],"Date":{"#text":"29 Mar 2015"},"Hardware":{"#text":"iPad Air 2"},"Version":{"#text":"iOS 8.1.3"},"Build":{"#text":"2.7.0.920"},"Orientation":{"#text":"PORTRAIT"},"NumPassed":{"#text":"66"},"NumFailed":{"#text":"10"}}]}},{"#text":["\n    ","\n    ","\n    ","\n    ","\n    ","\n    ","\n    ","\n    ","\n    ","\n  "],"TestSetID":{"#text":"TestSet_iOS2"},"Hardware":{"#text":"iPad Air 2"},"Version":{"#text":"iOS 8.1.3"},"Build":{"#text":"Pro 2.7.0.920"},"Orientation":{"#text":"LANDSCAPE"},"NumTestCases":{"#text":"29"},"NumTestScripts":{"#text":"7"},"TotalTime":{"#text":"13666.919"},"TestResults":{"#text":["\n      ","\n      ","\n    "],"TestRun":[{"#text":["\n        ","\n        ","\n        ","\n        ","\n        ","\n        ","\n        ","\n      "],"Date":{"#text":"30 Mar 2015"},"Hardware":{"#text":"iPad Air 2"},"Version":{"#text":"iOS 8.1.3"},"Build":{"#text":"2.7.0.915"},"Orientation":{"#text":"LANDSCAPE"},"NumPassed":{"#text":"34"},"NumFailed":{"#text":"15"}},{"#text":["\n        ","\n        ","\n        ","\n        ","\n        ","\n        ","\n        ","\n      "],"Date":{"#text":"31 Mar 2015"},"Hardware":{"#text":"iPad Air 2"},"Version":{"#text":"iOS 8.1.3"},"Build":{"#text":"Pro 2.7.0.920"},"Orientation":{"#text":"LANDSCAPE"},"NumPassed":{"#text":"10"},"NumFailed":{"#text":"19"}}]}}]}}"

代码：

var chartData = [];
for (var i = 0; i < testJson["TestSets"]["TestSet"].length; i++) {
    var testResults = [];
    var runs = testJson["TestSets"]["TestSet"][i]["TestResults"]["TestRun"];
    for (var j = 0; j < runs.length; j++) {
        var run = runs[j];
        testResults.push({"date": run["Date"]["#text"], "NumPassed": run["NumPassed"]["#text"], "NumFailed": run["NumFailed"]["#text"], "Orientation": run["Orientation"]["#text"]});
    }
}
chartData.push(testResults);
console.log(chartData);

Answer 1

var chartData = [];
for (var i = 0; i < testJson["TestSets"]["TestSet"].length; i++) {
var testResults = [];
var runs = testJson["TestSets"]["TestSet"][i]["TestResults"]["TestRun"];
for (var j = 0; j < runs.length; j++) {
var run = runs[j];
testResults.push({"date": run["Date"]["#text"], "NumPassed": run["NumPassed"]["#text"], "NumFailed": run["NumFailed"]["#text"], "Orientation": run["Orientation"]["#text"]});
}
}
chartData.push(testResults);
console.log(chartData);

应该是：

var chartData = [];
var testResults = [];
for (var i = 0; i < testJson["TestSets"]["TestSet"].length; i++) {
  var runs = testJson["TestSets"]["TestSet"][i]["TestResults"]["TestRun"];
  for (var j = 0; j < runs.length; j++) {
    var run = runs[j];
    testResults.push({"date": run["Date"]["#text"], "NumPassed": run["NumPassed"]["#text"], "NumFailed": run["NumFailed"]["#text"], "Orientation": run["Orientation"]["#text"]});
  }
}
chartData.push(testResults);
console.log(chartData);

Answer 2

这里也进行了清理和格式化。

/* global console */
/* global testJson */
(function() {
    'use strict';

    var chartData = [],
        testResults = [],
        runs, run;

    for (var i = 0; i < testJson.TestSets.TestSet.length; i++) {
        runs = testJson.TestSets.TestSet[i].TestResults.TestRun;
        for (var j = 0; j < runs.length; j++) {
            run = runs[j];
            testResults.push({
                'date': run.Date['#text'],
                'NumPassed': run.NumPassed['#text'],
                'NumFailed': run.NumFailed['#text'],
                'Orientation': run.Orientation['#text']
            });
        }
    }
    chartData.push(testResults);
    console.log(chartData);
}());

一些最佳实践建议将变量声明移到函数的顶部，因为这是解释器在幕后为您做的事情。（javascript 变量是函数作用域，而不是块）。

使用 Javascript 遍历 JSON

Iterate through a JSON with Javascript

javascript

arrays

json

amcharts