How to loop through the json onject returned by $.getJSON() method in JavaScript

Question

I am new to JavaScript and JQuery. I am trying to get weather data using the Openweathermap API. I am trying to loop through the object returned by the $.getJSON() method using Openweathermap API.

html code:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Weather Application</title>
    <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
    <link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
        <script src="assets/js/script.js"></script>
   </head>

<body>
<header>
    <h1>Weather Forecast</h1>
</header>


<p id="location"></p>

<p id="json"></p>

<!--<form id="search-form">-->
    <!--<fieldset>-->
        <!--<input type="textbox" id="search" name="search" align="right" />-->
        <!--<button id="search-submit" align="right" value="Go" />-->
    <!--</fieldset>-->
<!--</form>-->

<div style="padding:16px;">
    Enter the name of  city : <input id="c1"type="text" value="Carbondale"/>
    <button id="button1" >Go</button>
</div>



<div>
   <p id="result"></p>
</div>

<div>
    <h1>Forecast Data</h1>
    Enter the name of  city : <input id="c2" type="text" value="....."/>
             Number of Days : <input id="days" type="text" value="1"/>
    <button id="button2">Go</button>

    <p id="forecast"></p>

</div>
</body>
</html>

Corresponding JavaScript Code:

$(document).ready(function ()
{
$("#button2").click(function () {
        var search_City2 = $("#c2").val();
        var days = $("#days").val();

        var count = Number(days);

        var search_url2 =  "http://api.openweathermap.org/data/2.5/forecast/daily?q="+search_City2+
        "&mode=json&units=metric&cnt="+days;

        $("#forecast").html(search_City2 + " "+count+" "+search_url2+"</br>");
        //document.getElementById("location").innerHTML = city+ " "+url;
        var mydate = new Date();


            $.getJSON(search_url2, function (result) {
                $.each(result,function(i,field){
                    $("#forecast").append(JSON.stringfy(field));
                });

                //for(i =0;i<count;i++) {
                    //$("#forecast").append("</br><b>" + i + " " + count +" " + " </b>");
                    //$("#forecast").append("</br>Temperature at Day :" + result.list[5].temp.day);
                   // $("#forecast").append("</br>Temperature at Morning :" + result.list[i].temp.morn);
                   // $("#forecast").append("</br>Temperature at Evening :" + result.list[i].temp.eve);
                   // $("#forecast").append("</br>Temperature at Night :" + result.list[i].temp.night);
                   // $("#forecast").append("</br>Max Temperature:" + result.list[i].temp.max);
                    //$("#forecast").append("</br>Min Temperature:" + result.list[i].temp.min);
                    //$("#forecast").append("</br>Humidity: " + result.list[i].humidity + "%");
                   // $("#forecast").append("</br>Weather Condition : " + result.list[i].weather[i].description);
                    //$("#forecast").append("</p></div>");
                    // $("#forecast").append("</br>Temperature :" + result.list[1].temp.day);
                    // $("#result").append("</br>Humidity :"+ result.list[0].main.humidity);
                    // $("#result").append("</br>Weather Condition :"+result.list[0].weather[0].description) ;
                //}
            });
    });
});

I have tried with both for-loop and each function. But still it is not working. What am I doing wrong here ?

And what's your JavaScript code? – Scimonster Apr 22 '15 at 19:19 — Scimonster, Apr 22 '15 at 19:19

score 1 · Answer 1 · answered Apr 22 '15 at 19:29

I'm not exactly sure what you are trying to do but below is my best guess solution to the problem. It incorporates a .forEach loop to loop through each day's forecast in the response and retains the way you've been parsing the fields.

Fiddle: http://jsfiddle.net/0h6mv658/2/

Bug here: JSON.stringfy(field) -> JSON.stringify(field)

Updated code with loops:

            $.getJSON(search_url2, function (result) {
                $.each(result,function(i,field){
                    $("#forecast").append(JSON.stringify(field));
                });

                result.list.forEach(function(forecast, i) {
                    $("#forecast").append("</br><b>" + i + " " + result.list.length +" " + " </b>");
                    $("#forecast").append("</br>Temperature at Day :" + forecast.temp.day);
                    $("#forecast").append("</br>Temperature at Morning :" + forecast.temp.morn);
                    $("#forecast").append("</br>Temperature at Evening :" + forecast.temp.eve);
                    $("#forecast").append("</br>Temperature at Night :" + forecast.temp.night);
                    $("#forecast").append("</br>Max Temperature:" + forecast.temp.max);
                    $("#forecast").append("</br>Min Temperature:" + forecast.temp.min);
                    $("#forecast").append("</br>Humidity: " + forecast.humidity + "%");
                    forecast.weather.forEach(function(weather) {
                        $("#forecast").append("</br>Weather Condition : " + weather.description);
                    });
                    $("#forecast").append("</p></div>");
                    $("#forecast").append("</br>Temperature :" + forecast.temp.day);
                    $("#result").append("</br>Humidity :"+ forecast.main.humidity);
                    $("#result").append("</br>Weather Condition :"+forecast.weather[0].description) ;
                });
            });

score 0 · Answer 2 · edited Jul 24 '15 at 02:33

0

Thanks a lot. It worked. I also changed the for loop. Actually i made a problem on indexing .. that line should be like this:

    $("#forecast").append("</br>Weather Condition : " + result.list[i].weather[0].description)

And the loop structure will be:

for (var i = 0; i < result.list.length; i++)

edited Jul 24 '15 at 02:33

arcyqwerty

10,325
4
47
84

answered Apr 23 '15 at 16:48

sohan

577
1
6
9

score -1 · Answer 3 · answered Apr 22 '15 at 19:31

-1

You can use $.each(receivedData,callback);

answered Apr 22 '15 at 19:31

Adam Kaczmarek

146
2
10

How to loop through the json onject returned by $.getJSON() method in JavaScript

3 Answers3