jQuery: How do I append an array item in a loop?

Question

I'm trying to create a weather forecast page for a website.

I am using OpenWeatherMap to retrieve JSON data.

I want to loop through the "weather" array from the JSON, which contains objects that hold weather information.

This is the JSON shown in the console after using console.log (screenshot for readability):

Here is my jQuery/JavaScript:

$.getJSON("https://api.openweathermap.org/data/2.5/weather?lat=57.995221&lon=-6.761395&units=metric&APPID=myAPIkey", function(data){ 

    var currWeather = [data.weather];

    var len = currWeather.length;

    for (i = 0; i > len; i++) {

        $("#weather").append(currWeather[i].main);
        $("#desc").append(currWeather[i].description);
    }

    var clouds = data.clouds.all;
    $("#clouds").append(clouds);

    var temp = data.main.temp;
    $("#temp").append("Temperature: " + temp + "ยบC");

    var humidity = data.main.humidity;
    $("#humidity").append("Humidity: " + humidity + "%");

    var pressure = data.main.pressure;
    $("#pressure").append("Pressure: " + pressure);

    console.log(data);
});

My HTML:

<div id="weatherBox">
    <h2>Current Weather</h2>    
    <div id="mainWeather">
        <div id="temp"></div></td>
        <div id="weather"></div>
        <div id="desc"></div>
        <div id="icon"></div>       
    </div>  
    <br>
    <div id="clouds"></div>
    <div id="humidity"></div></td>
    <div id="pressure"></div></td>  
</div>

Basically, the only thing that isn't being displayed is the weather information. I have no errors or warnings in the console, am I doing this correctly?

Edit: I should add that in the json "weather" array, "0" and "1" are stored as strings. I tried to do:

$("#weather").append(currWeather[i.toString()].main);

Just to see if it would work. It did not.

Looks like data.weather is already an array, but.... var currWeather = [data.weather]; - why wrap it in another array? In fact you don't even need currWeather at all, just loop on data.weather until you reach data.weather.length -1 (hint <, not > - you got this the wrong way round too. i starts and 0 and so will never be greater than whatever the length of the array is. And if it was, it wouldn't match any of the array elements.) — ADyson
– ADyson, Commented Dec 19, 2017 at 14:36

Andrew L · Accepted Answer · 2017-12-19 14:50:30Z

A few things I found wrong with your code

You can access a property with dot notation or bracket notation so either data.weather or data["weather"] not [data.weather]
your for loop should declare i as a var and it should be < the length since you start at 0
The other properties should also be in the loop since they are in an obj that is part of the array you are looping.
you accessed the other properties incorrectly it should be weatherData[i].temp and not data.main.temp the main property is a string, not an obj so you can't use a property accessor.

And of course you will have to do some additional formatting to make your display look pretty.

var data = {
  weather: [{
    main: "Drizzle",
    description: "A light rain",
    temp: 50,
    humidity: 5,
    pressure: 10
  }, {
    main: "Sunny",
    description: "The sky is blue and so are you",
    temp: 80,
    humidity: 3,
    pressure: 4
  }]
}

var weatherData = data.weather;

var len = weatherData.length;

for (var i = 0; i < len; i++) {
  
  var currWeather = weatherData[i];
  //console.log(currWeather);
  $("#weather").append(currWeather.main);
  $("#desc").append(currWeather.description);


  //var clouds = data.clouds.all;
  //$("#clouds").append(clouds);

  var temp = currWeather.temp;
  //console.log(temp)
  $("#temp").append(" Temperature: " + temp + "ยบC");

  var humidity = currWeather.humidity;
  $("#humidity").append(" Humidity: " + humidity + "%");

  var pressure = currWeather.pressure;
  $("#pressure").append(" Pressure: " + pressure);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="weatherBox">
  <h2>Current Weather</h2>
  <div id="mainWeather">
    <div id="temp"></div>
    </td>
    <div id="weather"></div>
    <div id="desc"></div>
    <div id="icon"></div>
  </div>
  <br>
  <div id="clouds"></div>
  <div id="humidity"></div>
  </td>
  <div id="pressure"></div>
  </td>
</div>

Pang · Accepted Answer · 2017-12-22 09:09:29Z

1

Try this:

var currWeather = data.weather;

You're trying to storing data in the wrong place.

edited Dec 22, 2017 at 9:09

Pang

10.2k146 gold badges87 silver badges126 bronze badges

answered Dec 19, 2017 at 14:36

Darshit Hedpara

6706 silver badges17 bronze badges

Comments

Ares · Accepted Answer · 2017-12-19 15:01:54Z

0

Here is a working example on jsBin: https://jsbin.com/bijoyoyofo/1/edit?html,js,output

Basically

var currWeather = [data.weather];

should be

var currWeather = data.weather;

and

for (var i = 0; i > len; i++) {

should be

for (i = 0; i < len; i++) {

I also added a paragraph in the div but that is up to you.

edited Dec 19, 2017 at 15:01

answered Dec 19, 2017 at 14:56

Ares

1,3661 gold badge9 silver badges22 bronze badges

Comments

Stacey Reiman · Accepted Answer · 2017-12-20 01:44:26Z

I adjusted your document to include the jQuery $(document).ready() function, using an API key I found on Github for open weather. You can access the weather array from data.weather, as you see below. You also had the loop written incorrectly, as you needed the var i to be less than the length, not greater than. Here is a working sample of your code.

$(document).ready(function(){
  var myAPIkey = 'bd5e378503939ddaee76f12ad7a97608';

  $.getJSON("https://api.openweathermap.org/data/2.5/weather?lat=57.995221&lon=-6.761395&units=metric&APPID="+myAPIkey, function(data){ 
    var currWeather = data.weather;

    for (i = 0; i < currWeather.length; i++) {
        $("#weather").append(currWeather[i].main);
        $("#desc").append(currWeather[i].description);
    }
    var clouds = data.clouds.all;
    $("#clouds").append(clouds);

    var temp = data.main.temp;
    $("#temp").append("Temperature: " + temp + "ยบC");

    var humidity = data.main.humidity;
    $("#humidity").append("Humidity: " + humidity + "%");

    var pressure = data.main.pressure;
    $("#pressure").append("Pressure: " + pressure);

    console.log(data);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="weatherBox">
    <h2>Current Weather</h2>    
    <div id="mainWeather">
        <div id="temp"></div></td>
        <div id="weather"></div>
        <div id="desc"></div>
        <div id="icon"></div>       
    </div>  
    <br>
    <div id="clouds"></div>
    <div id="humidity"></div></td>
    <div id="pressure"></div></td>  
</div>

Collectives™ on Stack Overflow

jQuery: How do I append an array item in a loop?

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related