如何遍歷 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'];