如何遍历 JSON 列表并检索所需的值

Question

嘿大家

是的，我知道，有重复，但我仍在努力。 所以，我的目标是遍历 JSON 列表，我正在使用外部 api 获取该列表，并提取我需要的值。 我需要的值是存储在“天气”中的日期和 avgtempC

列表如下所示：

{
"data":
{
    "weather":
    [
        {
            "date": "2020-04-13",
            "astronomy": [
                {
                    "sunrise": "06:29 AM",
                    "sunset": "08:22 PM",
                    "moonrise": "02:24 AM",
                    "moonset": "09:53 AM",
                    "moon_phase": "Waning Gibbous",
                    "moon_illumination": "53"
                }
            ],
            "maxtempC": "7",
            "maxtempF": "44",
            "mintempC": "4",
            "mintempF": "40",
            "avgtempC": "6",
            "avgtempF": "43",
            "totalSnow_cm": "0.0",
            "sunHour": "11.6",
            "uvIndex": "4",
            "hourly": [
                {
                    "time": "0",
                    "tempC": "8",
                    "tempF": "47",
                    "windspeedMiles": "19",
                    "windspeedKmph": "30",
                    "winddirDegree": "65",
                    "winddir16Point": "ENE",
                    "weatherCode": "122"
                }]

        },
        {
            "date": "2020-04-14",
            "astronomy": [
                {
                    "sunrise": "06:27 AM",
                    "sunset": "08:24 PM",
                    "moonrise": "03:24 AM",
                    "moonset": "10:48 AM",
                    "moon_phase": "Last Quarter",
                    "moon_illumination": "46"
                }
            ],
            "maxtempC": "11",
            "maxtempF": "52",
            "mintempC": "3",
            "mintempF": "37",
            "avgtempC": "7",
            "avgtempF": "45",
            "totalSnow_cm": "0.0",
            "sunHour": "11.6",
            "uvIndex": "5",
            "hourly": [
                {
                    "time": "0",
                    "tempC": "4",
                    "tempF": "39",
                    "windspeedMiles": "4",
                    "windspeedKmph": "6",
                    "winddirDegree": "121",
                    "winddir16Point": "ESE",
                    "weatherCode": "116"
                }]
        }]
}
}

当我直接访问这些值时，我得到了正确的 output ，如下所示：

 let forecast = response['data']['weather'][0];
 let output = `${forecast['date']} : ${forecast['avgtempC']}°C`;

但我想要的是遍历列表并获取每一天的所有日期和温度。 我试过这个：

     for (let k in forecast) {
      if (forecast.hasOwnProperty(k)) {
        output += (`[` + forecast[k] + `]` + `,`);     
      }
    }

和

    for (let k in forecast) {
        output += (`[` + forecast[k] + `]` + `,`);     
    }

但我得到的是：

[2020-04-13],[[object Object]],[7],[44],[4],[40],[6],[43],[0.0],[11.6],[4],[object Object]

并且由于某种原因，它只读取第一个日期 (2020-04-13) 的详细信息，但不能同时读取两者。

我也试过

    for (let k in forecast) {
        output += (`[` + forecast[k].date + `]` + `,`);     
    }

但它返回未定义的对象。 有什么我遗漏的东西还是只是循环不正确，我花了很多时间试图解决这个问题，但没有任何运气。 我将不胜感激任何帮助，谢谢！

Answer 1

您当前正在循环第一个数组元素的属性（ response['data']['weather'][0] ）。 如果要遍历数组的所有元素，则不应访问第一个元素（ [0] ）。 此外， for...in循环通过 object 属性。 您想使用for...of which 在可迭代对象（如数组）上循环。

 const response = {"data":{"weather":[{"date":"2020-04-13","astronomy":[{"sunrise":"06:29 AM","sunset":"08:22 PM","moonrise":"02:24 AM","moonset":"09:53 AM","moon_phase":"Waning Gibbous","moon_illumination":"53"}],"maxtempC":"7","maxtempF":"44","mintempC":"4","mintempF":"40","avgtempC":"6","avgtempF":"43","totalSnow_cm":"0.0","sunHour":"11.6","uvIndex":"4","hourly":[{"time":"0","tempC":"8","tempF":"47","windspeedMiles":"19","windspeedKmph":"30","winddirDegree":"65","winddir16Point":"ENE","weatherCode":"122"}]},{"date":"2020-04-14","astronomy":[{"sunrise":"06:27 AM","sunset":"08:24 PM","moonrise":"03:24 AM","moonset":"10:48 AM","moon_phase":"Last Quarter","moon_illumination":"46"}],"maxtempC":"11","maxtempF":"52","mintempC":"3","mintempF":"37","avgtempC":"7","avgtempF":"45","totalSnow_cm":"0.0","sunHour":"11.6","uvIndex":"5","hourly":[{"time":"0","tempC":"4","tempF":"39","windspeedMiles":"4","windspeedKmph":"6","winddirDegree":"121","winddir16Point":"ESE","weatherCode":"116"}]}]}}; for (const forecast of response.data.weather) { console.log(`${forecast.date}: ${forecast.avgtempC}°C`); }

Answer 2

非常感谢@3limin4t0r，我也尝试自己解决它，它确实有效，有效的是

    for(let i = 0; i < forecast.length; i++){
        output += (`[` + forecast[i].date + `]`); 
        output += (`[` + forecast[i].avgtempC + `]`);
    }

但在这种情况下，我不得不将预测更改为

let forecast = response['data']['weather'];