mercredi 22 avril 2015

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

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://ift.tt/1fJwIAs"></script>
    <link href="http://ift.tt/1f1Mm3V" 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://ift.tt/1o8YE0w"+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 ?

Aucun commentaire:

Enregistrer un commentaire