Question

我正在遍历具有经度和纬度值的位置数组。我正在使用这些值异步调用Open Weather API。然后，我遍历返回的JSON数组，以获取每个位置的预测日期和时间，预测描述以及预测图标。然后我想将它们存储在数组中。

我的问题是，当我尝试将数据推回“ forecastArray”（以便可以使用jQuery将数据动态地放入HTML中）时，当我在控制台中登录时，我无法访问该数据。返回为“未定义”。实际的数组将记录到浏览器，但我无法将数据分配给变量。

我对Web开发还很陌生，因此，我将为您提供任何建议。我一定不了解范围限制。

这是我的代码：

let ForcastArray = []
                        
                        for (let i = 0; i < cities1Array.length; i++) {


                            // console.log(citiesArray1[i])

                            let lat = citiesArray1[i][0]

                            let lng = citiesArray1[i][1]

                            openWeatherForcast(lat, lng).then(forcast => {
                                    
                                // console.log(forcast)
                                
                                for (let j = 0; j < 10; j++) {

                                    // console.log(forcast['list'][j]['dt_txt'])
                                    let dateTime = forcast['list'][j]['dt_txt']
                                 
                                    // console.log(forcast['list'][j]['weather'][0]['description'])
                                    let description = forcast['list'][j]['weather'][0]['description']
                                    // console.log(forcast['list'][j]['weather'][0]['icon'])
                                   
                                    let iconcode = forcast['list'][j]['weather'][0]['icon'];
                                    let iconurl = "http://openweathermap.org/img/wn/" + iconcode + "@2x.png";
                                    ForcastArray.push(dateTime, description, iconurl)
                                    
                                }
                            })
                        }
                        
                        console.log(ForcastArray)

                        // Returns:

                        // []
                        //     0: "2020-09-27 12:00:00"
                        //     1: "few clouds"
                        //     2: "http://openweathermap.org/img/wn/02d@2x.png"
                        //     3: "2020-09-27 15:00:00"
                        //     4: "clear sky"
                        //     5: "http://openweathermap.org/img/wn/01d@2x.png"
                        //     6: "2020-09-27 18:00:00"
                        //     7: "clear sky"
                        //     8: "http://openweathermap.org/img/wn/01n@2x.png"
                        //     9: "2020-09-27 21:00:00"
                        //     10: "few clouds"
                        //     11: "http://openweathermap.org/img/wn/02n@2x.png"
                        //     12: "2020-09-28 00:00:00"
                        //     13: "scattered clouds"
                        //     14: "http://openweathermap.org/img/wn/03n@2x.png"
                        //     15: "2020-09-28 03:00:00"
                        //     16: "light rain"
                        //     17: "http://openweathermap.org/img/wn/10n@2x.png"
                        //     18: "2020-09-28 06:00:00"
                        //     19: "light rain"
                        //     20: "http://openweathermap.org/img/wn/10d@2x.png"
                        //     21: "2020-09-28 09:00:00"
                        //     22: "moderate rain"
                        //     23: "http://openweathermap.org/img/wn/10d@2x.png"
                        //     24: "2020-09-28 12:00:00"
                        //     25: "light rain"
                        //     26: "http://openweathermap.org/img/wn/10d@2x.png"
                        //     27: "2020-09-28 15:00:00"
                        //     28: "overcast clouds"
                        //     29: "http://openweathermap.org/img/wn/04d@2x.png"
                        //     length: 30
                        //     __proto__: Array(0)
                        
                        console.log(ForcastArray[0])
                        
                        // Returns:

                        // undefined

Answer 1

如果填充了数组，您应该可以像写（[0]）一样使用数组访问运算符（方括号）console.log(ForcastArray[0]访问它。

正如Deniz指出的那样，这可能是时间问题。您应该将console.logs放在.then()块中，执行该块时将可以访问该数组。

openWeatherForcast(lat, lng).then(forcast => {
    
    for (let j = 0; j < 10; j++) {

        // console.log(forcast['list'][j]['dt_txt'])
        let dateTime = forcast['list'][j]['dt_txt']
    
        // console.log(forcast['list'][j]['weather'][0]['description'])
        let description = forcast['list'][j]['weather'][0]['description']
        // console.log(forcast['list'][j]['weather'][0]['icon'])
    
        let iconcode = forcast['list'][j]['weather'][0]['icon'];
        let iconurl = "http://openweathermap.org/img/wn/" + iconcode + "@2x.png";
        ForcastArray.push(dateTime, description, iconurl)
        
    }

    console.log(ForcastArray[0])
})

您可以计算返回的承诺，并查看它们是否与城市数量（citys1Array或citysArray1的长度）匹配。当返回的promises == cityArray1.length时，您可以执行另一个函数来启动DOM操作（通过jQuery将数据插入HTML）。

访问数组值

1 个答案: