javascript for 循环遍历嵌套的 json 值

Question

我正在尝试循环遍历所有 total 和 first_record 值的 json 文件。关键是

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

我正在尝试返回结果：

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

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

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

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

首先，在您的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);

Answer 2

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/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map