How to loop through the json onject returned by $.getJSON() method in JavaScript -
i new javascript , jquery. trying weather data using openweathermap api. trying loop through object returned $.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 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 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>" + + " " + count +" " + " </b>"); //$("#forecast").append("</br>temperature @ day :" + result.list[5].temp.day); // $("#forecast").append("</br>temperature @ morning :" + result.list[i].temp.morn); // $("#forecast").append("</br>temperature @ evening :" + result.list[i].temp.eve); // $("#forecast").append("</br>temperature @ 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 both for-loop , each function. still not working. doing wrong here ?
i'm not sure trying below best guess solution problem. incorporates .foreach loop loop through each day's forecast in response , retains way you've been parsing fields.
fiddle: http://jsfiddle.net/0h6mv658/2/
bug here: json.stringfy(field) -> json.stringify(field)
updated code 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>" + + " " + result.list.length +" " + " </b>"); $("#forecast").append("</br>temperature @ day :" + forecast.temp.day); $("#forecast").append("</br>temperature @ morning :" + forecast.temp.morn); $("#forecast").append("</br>temperature @ evening :" + forecast.temp.eve); $("#forecast").append("</br>temperature @ 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) ; }); });
Comments
Post a Comment