如何在 JavaScript 中循环 $.getJSON() 方法返回的 json 对象

问题描述 投票：0回答：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
功能。但它仍然不起作用。我在这里做错了什么？

javascript json openweathermap weather-api
3个回答
1
投票

我不太确定你想做什么，但下面是我对问题的最佳猜测解决方案。它包含一个 

.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) ;
                });
            });
0
投票

非常感谢。有效。我还改变了for循环。实际上我在索引上遇到了问题..该行应该是这样的：

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

循环结构将是： 

for (var i = 0; i < result.list.length; i++)
-1
投票

您可以使用

$.each(receivedData,callback);

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.