如何循環通過JavaScript中的$ .getJSON（）方法返回的json onject

-3

我是JavaScript和JQuery的新手。我正在嘗試使用Openweathermap API獲取天氣數據。我正在嘗試使用Openweathermap API循環使用$.getJSON()方法返回的對象。

HTML代碼：

<!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>

相應的JavaScript代碼：

$(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) ; 
       //} 
      }); 
    }); 
});

我試圖與這兩個for-loop和each功能。但它仍然不起作用。我在這裏做錯了什麼？

來源

2015-04-22 sohan

，什麼是你的JavaScript代碼？ – Scimonster

我不完全確定你在做什麼，但下面是我最好的解決問題的方法。它包含一個.forEach循環來循環響應每一天的預測並保留解析字段的方式。

小提琴：http://jsfiddle.net/0h6mv658/2/

錯誤的位置：JSON.stringfy(field) -> JSON.stringify(field)

更新代碼迴路：

  $.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) ; 
       }); 
      });

來源

2015-04-22 19:29:02 arcyqwerty

-1

您可以使用$.each(receivedData,callback);

來源

2015-04-22 19:31:12

非常感謝。有效。我也改變了for循環。其實我做了索引的問題..該行應該是這樣的：

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

，循環結構將是：

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

來源

2015-04-23 16:48:30 sohan

如何循環通過JavaScript中的$ .getJSON（）方法返回的json onject

回答

相關問題