使用 JavaScript 获取开放天气预报

Question

我想获取 JavaScript 的 5 天天气预报。当我执行下面的代码时，我得到 TypeError: Cannot read property 'temp' of undefined。如果我将 https://api.openweathermap.org/data/2.5/forecast?q= 更改为 https://api.openweathermap.org/data/2.5/weather?q=，我可以准确无误地获取当前天气。为什么预测对我不起作用？我错过了什么吗？

JavaScript（我想 .then(data => 片段有问题）：

var activities = document.getElementById('activitySelector');
var main = document.querySelector('#name');
var temp = document.querySelector('.temp');
var desc = document.querySelector('.desc');



activities.addEventListener('change', (e) => {
    fetch('https://api.openweathermap.org/data/2.5/forecast?q='+e.target.value+'&appid=<<<<APIKEY>>>>&cnt=5')
        .then(response => response.json())
        .then(data => {
            var tempValue = data['main']['temp'];
            var nameValue = data['name'];
            var descValue = data['weather'][0]['description'];

            main.innerHTML = nameValue;
            desc.innerHTML = "Desc - "+descValue;
            temp.innerHTML = "Temp - "+tempValue;

        })

        .catch(err => alert(err));
})

HTML:

   <select name="cities" id="activitySelector">
       <div class="options">
           <option class="option" value="warsaw">Warsaw</option>
           <option class="option" value="phoenix">Phoenix</option>
           <option class="option" value="berlin">Berlin</option>
       </div>
   </select>

   <div class="container">
       <div class="card">
           <h1 class="name" id="name"></h1>
           <p class="temp"></p>
           <p class="clouds"></p>
           <p class="desc"></p>
       </div>
   </div>

JSON 我正在尝试获取：

{"cod":"200","message":0,"cnt":5,"list":[{"dt":1618606800,"main":{"temp":279.45,"feels_like":277.97,"temp_min":278.72,"temp_max":279.45,"pressure":1031,"sea_level":1031,"grnd_level":1028,"humidity":56,"temp_kf":0.73},"weather":[{"id":802,"main":"Clouds","description":"scattered clouds","icon":"03n"}],"clouds":{"all":25},"wind":{"speed":2.06,"deg":80,"gust":6.1},"visibility":10000,"pop":0,"sys":{"pod":"n"},"dt_txt":"2021-04-16 21:00:00"},{"dt":1618617600,"main":{"temp":278.63,"feels_like":277.46,"temp_min":276.98,"temp_max":278.63,"pressure":1031,"sea_level":1031,"grnd_level":1028,"humidity":61,"temp_kf":1.65},"weather":[{"id":801,"main":"Clouds","description":"few clouds","icon":"02n"}],"clouds":{"all":23},"wind":{"speed":1.65,"deg":53,"gust":4.49},"visibility":10000,"pop":0,"sys":{"pod":"n"},"dt_txt":"2021-04-17 00:00:00"},{"dt":1618628400,"main":{"temp":276.91,"feels_like":275.48,"temp_min":275.64,"temp_max":276.91,"pressure":1031,"sea_level":1031,"grnd_level":1027,"humidity":66,"temp_kf":1.27},"weather":[{"id":800,"main":"Clear","description":"clear sky","icon":"01n"}],"clouds":{"all":10},"wind":{"speed":1.65,"deg":21,"gust":4.06},"visibility":10000,"pop":0,"sys":{"pod":"n"},"dt_txt":"2021-04-17 03:00:00"},{"dt":1618639200,"main":{"temp":275.25,"feels_like":273.27,"temp_min":275.25,"temp_max":275.25,"pressure":1031,"sea_level":1031,"grnd_level":1028,"humidity":67,"temp_kf":0},"weather":[{"id":800,"main":"Clear","description":"clear sky","icon":"01d"}],"clouds":{"all":1},"wind":{"speed":1.89,"deg":16,"gust":4.72},"visibility":10000,"pop":0,"sys":{"pod":"d"},"dt_txt":"2021-04-17 06:00:00"},{"dt":1618650000,"main":{"temp":280.37,"feels_like":278.43,"temp_min":280.37,"temp_max":280.37,"pressure":1030,"sea_level":1030,"grnd_level":1027,"humidity":44,"temp_kf":0},"weather":[{"id":800,"main":"Clear","description":"clear sky","icon":"01d"}],"clouds":{"all":2},"wind":{"speed":2.84,"deg":39,"gust":4.51},"visibility":10000,"pop":0,"sys":{"pod":"d"},"dt_txt":"2021-04-17 09:00:00"}],"city":{"id":2643743,"name":"London","coord":{"lat":51.5085,"lon":-0.1257},"country":"GB","population":1000000,"timezone":3600,"sunrise":1618549331,"sunset":1618599475}}

Answer 1

所以你有

https://api.openweathermap.org/data/2.5/forecast?q=

我在文档中看到

api.openweathermap.org/data/2.5/forecast/daily?q={city name}&cnt={cnt}&appid={API key}

所以我假设您在 URL 中缺少 /daily。

Answer 2

问题只是您取消引用所需值的方式。

data 有一个属性 list。 list 是一个对象数组，每个对象都有一个 main 键，该键指向一个具有 temp 键的对象。

例如，您可以获取所有元素并记录它们的 main.temp 字段，如下所示：

const data = {
  "cod": "200",
  "message": 0,
  "cnt": 5,
  "list": [{
    "dt": 1618606800,
    "main": {
      "temp": 279.45,
      "feels_like": 277.97,
      "temp_min": 278.72,
      "temp_max": 279.45,
      "pressure": 1031,
      "sea_level": 1031,
      "grnd_level": 1028,
      "humidity": 56,
      "temp_kf": 0.73
    },
    "weather": [{
      "id": 802,
      "main": "Clouds",
      "description": "scattered clouds",
      "icon": "03n"
    }],
    "clouds": {
      "all": 25
    },
    "wind": {
      "speed": 2.06,
      "deg": 80,
      "gust": 6.1
    },
    "visibility": 10000,
    "pop": 0,
    "sys": {
      "pod": "n"
    },
    "dt_txt": "2021-04-16 21:00:00"
  }, {
    "dt": 1618617600,
    "main": {
      "temp": 278.63,
      "feels_like": 277.46,
      "temp_min": 276.98,
      "temp_max": 278.63,
      "pressure": 1031,
      "sea_level": 1031,
      "grnd_level": 1028,
      "humidity": 61,
      "temp_kf": 1.65
    },
    "weather": [{
      "id": 801,
      "main": "Clouds",
      "description": "few clouds",
      "icon": "02n"
    }],
    "clouds": {
      "all": 23
    },
    "wind": {
      "speed": 1.65,
      "deg": 53,
      "gust": 4.49
    },
    "visibility": 10000,
    "pop": 0,
    "sys": {
      "pod": "n"
    },
    "dt_txt": "2021-04-17 00:00:00"
  }, {
    "dt": 1618628400,
    "main": {
      "temp": 276.91,
      "feels_like": 275.48,
      "temp_min": 275.64,
      "temp_max": 276.91,
      "pressure": 1031,
      "sea_level": 1031,
      "grnd_level": 1027,
      "humidity": 66,
      "temp_kf": 1.27
    },
    "weather": [{
      "id": 800,
      "main": "Clear",
      "description": "clear sky",
      "icon": "01n"
    }],
    "clouds": {
      "all": 10
    },
    "wind": {
      "speed": 1.65,
      "deg": 21,
      "gust": 4.06
    },
    "visibility": 10000,
    "pop": 0,
    "sys": {
      "pod": "n"
    },
    "dt_txt": "2021-04-17 03:00:00"
  }, {
    "dt": 1618639200,
    "main": {
      "temp": 275.25,
      "feels_like": 273.27,
      "temp_min": 275.25,
      "temp_max": 275.25,
      "pressure": 1031,
      "sea_level": 1031,
      "grnd_level": 1028,
      "humidity": 67,
      "temp_kf": 0
    },
    "weather": [{
      "id": 800,
      "main": "Clear",
      "description": "clear sky",
      "icon": "01d"
    }],
    "clouds": {
      "all": 1
    },
    "wind": {
      "speed": 1.89,
      "deg": 16,
      "gust": 4.72
    },
    "visibility": 10000,
    "pop": 0,
    "sys": {
      "pod": "d"
    },
    "dt_txt": "2021-04-17 06:00:00"
  }, {
    "dt": 1618650000,
    "main": {
      "temp": 280.37,
      "feels_like": 278.43,
      "temp_min": 280.37,
      "temp_max": 280.37,
      "pressure": 1030,
      "sea_level": 1030,
      "grnd_level": 1027,
      "humidity": 44,
      "temp_kf": 0
    },
    "weather": [{
      "id": 800,
      "main": "Clear",
      "description": "clear sky",
      "icon": "01d"
    }],
    "clouds": {
      "all": 2
    },
    "wind": {
      "speed": 2.84,
      "deg": 39,
      "gust": 4.51
    },
    "visibility": 10000,
    "pop": 0,
    "sys": {
      "pod": "d"
    },
    "dt_txt": "2021-04-17 09:00:00"
  }],
  "city": {
    "id": 2643743,
    "name": "London",
    "coord": {
      "lat": 51.5085,
      "lon": -0.1257
    },
    "country": "GB",
    "population": 1000000,
    "timezone": 3600,
    "sunrise": 1618549331,
    "sunset": 1618599475
  }
}

for (const day of data.list){
   console.log(`Temp: ${day.main.temp}`)
}

使用 JavaScript 获取开放天气预报

Fetching Openweather forecast using JavaScript

javascript

openweathermap