1

My question is, I can display both 'description' and 'temp', so, why can't I retrieve the 'name' of the city. Please look at a fetch response:

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>

Am I wrong at var nameValue = data['name']? am I missing something?

thanks in advance

I am looking forward to learning how to use fetch correctly to improve my projects.

Lbayout
  • 23
  • 1
  • 7
  • What is the output of ``data['name']``? – Majed Badawi May 23 '20 at 20:50
  • it is expected to be the city according to the data provided by the fetch method in the url with the proper key. – Lbayout May 23 '20 at 21:13
  • }, "id": 2172797, "name": "Cairns", "cod": 200 } Name woulb be the city and cod is the weather icon code. – Lbayout May 23 '20 at 21:13
  • Is it because you've named the variable `name`? Does it help if you call it something else? See https://stackoverflow.com/questions/10523701/using-the-variable-name-doesnt-work-with-a-js-object – Luke Woodward May 23 '20 at 21:17
  • It is not a variable, it is an json array that comes from the fetch in the opeanweather API – Lbayout May 23 '20 at 23:23

0 Answers0