Fetch-api OpenWeather，访问属性“名称”值并显示该问题

由 发布于

我的问题是，我可以同时显示“描述”和“临时”，因此，为什么我不能检索城市的“名称”。请查看获取响应：

var button = document.querySelector('.button')
var inputValue = document.querySelector('.inputValue')
var name = document.querySelector('.name');
var desc = document.querySelector('.desc');
var temp = document.querySelector('.temp');

//trigering Action Fetch api

button.addEventListener('click',function(){
fetch ('https://api.openweathermap.org/data/2.5/weather?q='+inputValue.value+'&appid=0f91ec65ce9099b9b43a35a9f89f6f26')
.then(response => response.json())
.then(data => {

  var nameValue = data['name'];
  var tempValue = data['main']['temp'];
  var descValue = data['weather'][0]['description'];
  

name.innerHTML = nameValue;
temp.innerHTML = tempValue;
desc.innerHTML = descValue;

})

.catch(err => alert("Wrong city name!"))
})
{
  "coord": {
    "lon": 145.77,
    "lat": -16.92
  },
  "weather": [{
    "id": 802,
    "main": "Clouds",
    "description": "scattered clouds",
    "icon": "03n"
  }],
  "base": "stations",
  "main": {
    "temp": 300.15,
    "pressure": 1007,
    "humidity": 74,
    "temp_min": 300.15,
    "temp_max": 300.15
  },
  "visibility": 10000,
  "wind": {
    "speed": 3.6,
    "deg": 160
  },
  "clouds": {
    "all": 40
  },
  "dt": 1485790200,
  "sys": {
    "type": 1,
    "id": 8166,
    "message": 0.2064,
    "country": "AU",
    "sunrise": 1485720272,
    "sunset": 1485766550
  },
  "id": 2172797,
  "name": "Cairns",
  "cod": 200
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
</html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css"/>
    <title>Request APP template</title>
</head>
<h1>Simple weather App</h1>
<body>
    <div class="input">
        <input type="text" class="inputValue" placeholder="Enter a city">
        <input type="submit" value="Submit" class="button"></div>
    </div>
    <div>
        <h1>
            Current city weather conditions:
        </h1>
    </div>
<div class="display">
    <h1 class="name"></h1>
    <p class="desc"></p>
    <p class="temp"></p>
    <i class="icon"></p>
       </div>
    <script src="app.js"></script>
    </body>
</html>

我在var nameValue = data ['name']上输入错误吗？我错过了什么吗？

提前致谢

我期待学习如何正确使用访存来改善我的项目。