Weather App- .weather not working from api. others fine, why?

Hi. Cant figure out why this is happening. Only .weather stuff is failing, I assume I am overlooking something obvious.

Using codepen’s bootstrap and jQuery.
Codepen


HTML

<head>
<title>Weather in Las Vegas</title>
</head>
<body>
<div class='container'>
  <h1>Weather in Las Vegas</h1>
  <div class='row'>
    <div class="col-md-12">
      <ol>
        <li id='a'></li>
        <li id='b'></li>
        <li id='c'></li>
        <li id='d'></li>
        <li id='e'></li>
        <li id='f'></li>
        <li id='g'></li>
      </ol>
    </div>
</div>
</body>

CSS

.container{
  text-align:center;
}

JS

$.getJSON("http://api.openweathermap.org/data/2.5/weather?q=LasVegas&APPID=0398adbea42810772a2cbefed6cd7bdd", function(data){
var aa = data.coord.lon;
var bb = data.weather.main;
var cc = data.coord.lat;
var dd = data.weather.description;
var ee = data.wind.speed;
var ff = data.weather.id;
var gg = data.main.pressure;
  $("#a").html(aa);
  $("#b").html(bb);	
  $("#c").html(cc);
  $("#d").html(dd);
  $("#e").html(ee);
  $("#f").html(ff);
  $("#g").html(gg);
});

I cleaned up your code.
You need to use triple backticks to post code to the forum.
See this post for details.

Prophetic :wink:


Look at the weather section in the JSON:

"weather": [
    {
      "id": 802,
      "main": "Clouds",
      "description": "scattered clouds",
      "icon": "03n"
    }
  ]

Now look at your code:

var badVariableName = data.weather.main;

Hint: “weather” is not an object but an array with a nested object :sunglasses:


var badVariableName = data.weather[0].main;
1 Like

Thanks Isaac,
I thought I had tried that… :slight_smile:
Thanks for the clean up… I was editing (unsuccessfully) to correct the post while you replied.

NeverMind!!! lol
Can you tell me why it only fails for .weather? .main.pressure and others were working…-

lol, I do stuff like this all the time too :blush:

2 Likes