通过嵌套json值循环的javascript

Question

我试图遍历所有total first_record值的json文件。 关键是

json.STATION[0].OBSERVATIONS.precipitation[0].total

我正在尝试返回结果：

[20180116, 0.8], [20180117, 0.0] . . .

我尝试了多种方法。 我最好的结果是经典的undefined下面是我一直在研究的jsfiddle的摘录。 json是由mesowest.net api生成的。

一旦解决了这个问题，我希望将这些值绘制在高图中。 谢谢。

 const data = { "UNITS": { "precipitation": "Inches" }, "STATION": [{ "STATUS": "ACTIVE", "MNET_ID": "25", "PERIOD_OF_RECORD": { "start": "20000120", "end": "20180121" }, "ELEVATION": "6340", "NAME": "BOGUS BASIN", "RESTRICTED": false, "STID": "BOGI1", "ELEV_DEM": "6362", "LONGITUDE": "-116.09685", "STATE": "ID", "OBSERVATIONS": { "precipitation": [{ "count": 23, "first_report": "20180115", "interval": 1, "report_type": "precip_accum", "last_report": "20180115", "total": 0.0 }, { "count": 24, "first_report": "20180116", "interval": 2, "report_type": "precip_accum", "last_report": "20180116", "total": 0.2 }, { "count": 24, "first_report": "20180117", "interval": 3, "report_type": "precip_accum", "last_report": "20180117", "total": 0.0 }, { "count": 24, "first_report": "20180118", "interval": 4, "report_type": "precip_accum", "last_report": "20180118", "total": 0.0 }, { "count": 24, "first_report": "20180119", "interval": 5, "report_type": "precip_accum", "last_report": "20180119", "total": 0.8 }, { "count": 24, "first_report": "20180120", "interval": 6, "report_type": "precip_accum", "last_report": "20180120", "total": 0.0 }, { "count": 13, "first_report": "20180121", "interval": 7, "report_type": "precip_accum", "last_report": "20180121", "total": 0.0 }] }, "LATITUDE": "43.76377", "TIMEZONE": "America\\/Boise", "ID": "1160" }], "SUMMARY": { "DATA_QUERY_TIME": 1.6429424286, "RESPONSE_CODE": 1, "RESPONSE_MESSAGE": "OK", "METADATA_RESPONSE_TIME": "0.0920295715332 ms", "NUMBER_OF_OBJECTS": 1, "PRECIP_DATA_TIME": 2.4950504303, "DATA_PARSE_TIME": 0.8418560028 } }; console.log(data.STATION[0].OBSERVATIONS.precipitation[4].total); document.getElementById("demo").innerHTML = data.STATION[0].OBSERVATIONS.precipitation[4].total; const totl = data.STATION[0].OBSERVATIONS.precipitation[0].total; console.log(totl); // var i, precipitation; for (i = 0; i < data.STATION[0].OBSERVATIONS.precipitation.total.length; i++) { precip = data.STATION[0].OBSERVATIONS.precipitation[i].total; } console.log(precip); //console.log(obj); 

 <p id="demo"></p> 

Answer 1

FWIW，您的关键不是precipitation[0]但您想遍历所有沉淀要素：

// precipitation is an array, so it supports Array.prototype.map()

var output = data.STATION[0].OBSERVATIONS.precipitation.map(function(p) {
    return [p.first_report, p.total] });

另请参阅： https : //developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/map

Answer 2

首先，在您的for循环中，您引用的是data.STATION[0].OBSERVATIONS.precipitation.total.length ，但其中的total部分都没有定义。 它必须是precipitation[0].total才能是任何值，即使那样，它也不是数组。 您只想要：

data.STATION[0].OBSERVATIONS.precipitation.length

同样，仅在代码样式方面，将其粘贴到变量中即可，这样您就不必一遍又一遍地输入这种疯狂。 它还将有助于避免输入错误：

const records = data.STATION[0].OBSERVATIONS.precipitation;

您也只是一遍又一遍地将相同的值设置回一个变量，因此最后，您将只有最后一个值。 您想将它们粘贴在数组中。

const totals = [];
for (let i = 0; i < records.length; i++) {
  totals.push(records[i].total);
}

如果需要total和first_report ，则可以执行并行数组：

const totals = [];
const firsts = [];
for (let i = 0; i < records.length; i++) {
  totals.push(records[i].total);
  firsts.push(records[i].first_record);
}

或具有数组数组：

const results = [];
for (let i = 0; i < records.length; i++) {
  results.push([records[i].total, records[i].first_record]);
}

这是一个工作示例：

 const data = { "UNITS": { "precipitation": "Inches" }, "STATION": [{ "STATUS": "ACTIVE", "MNET_ID": "25", "PERIOD_OF_RECORD": { "start": "20000120", "end": "20180121" }, "ELEVATION": "6340", "NAME": "BOGUS BASIN", "RESTRICTED": false, "STID": "BOGI1", "ELEV_DEM": "6362", "LONGITUDE": "-116.09685", "STATE": "ID", "OBSERVATIONS": { "precipitation": [{ "count": 23, "first_report": "20180115", "interval": 1, "report_type": "precip_accum", "last_report": "20180115", "total": 0.0 }, { "count": 24, "first_report": "20180116", "interval": 2, "report_type": "precip_accum", "last_report": "20180116", "total": 0.2 }, { "count": 24, "first_report": "20180117", "interval": 3, "report_type": "precip_accum", "last_report": "20180117", "total": 0.0 }, { "count": 24, "first_report": "20180118", "interval": 4, "report_type": "precip_accum", "last_report": "20180118", "total": 0.0 }, { "count": 24, "first_report": "20180119", "interval": 5, "report_type": "precip_accum", "last_report": "20180119", "total": 0.8 }, { "count": 24, "first_report": "20180120", "interval": 6, "report_type": "precip_accum", "last_report": "20180120", "total": 0.0 }, { "count": 13, "first_report": "20180121", "interval": 7, "report_type": "precip_accum", "last_report": "20180121", "total": 0.0 }] }, "LATITUDE": "43.76377", "TIMEZONE": "America\\/Boise", "ID": "1160" }], "SUMMARY": { "DATA_QUERY_TIME": 1.6429424286, "RESPONSE_CODE": 1, "RESPONSE_MESSAGE": "OK", "METADATA_RESPONSE_TIME": "0.0920295715332 ms", "NUMBER_OF_OBJECTS": 1, "PRECIP_DATA_TIME": 2.4950504303, "DATA_PARSE_TIME": 0.8418560028 } }; const records = data.STATION[0].OBSERVATIONS.precipitation; const results = []; for (let i = 0; i < records.length; i++) { results.push([records[i].total, records[i].first_report]); } console.log(results);