2015-04-22 3 views
-3

Я новичок в JavaScript и JQuery. Я пытаюсь получить данные о погоде, используя API Openweathermap. Я пытаюсь пропустить объект, возвращаемый методом $.getJSON(), используя API Openweathermap.

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функции. Но все же он не работает. Что я здесь делаю неправильно?

+0

И что ваш код JavaScript? – Scimonster

ответ

1

Я не совсем уверен, что вы пытаетесь сделать, а ниже - мое лучшее решение для решения проблемы. Он включает цикл .forEach, чтобы прокрутить прогноз каждого дня в ответе и сохраняет способ анализа полей.

Fiddle: 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) ; 
       }); 
      }); 
-1

Вы можете использовать $.each(receivedData,callback);

0

Спасибо большое. Это сработало. Я также изменил цикл for. На самом деле я сделал задачу по индексации .. эта строка должна выглядеть так:

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

И структура цикла будет:

for (var i = 0; i < result.list.length; i++) 
Смежные вопросы