2015-10-30 4 views
0

У меня возникли проблемы с разбором запроса json от api.world.weather.com, ниже приведен код, который я использую. Когда я смотрю на JSON на консоли, похоже, что я вызываю правильные данные, но im получаю ошибки. например: ReferenceError: погода не определенНе удалось разобрать поток json

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <title>Temp</title> 
    <style> 
    html {margin:2em; font-size:2em; font-family:Helvetica, Arial, sans-serif;} 
    h1 {margin:0 0 0.2em; color:#369;} 
    img {float:left; margin-right:1em;} 
    ul {float:left; margin:0; padding:0; list-style:none;} 
    </style> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
</head> 
<body> 
    <section> 
    <h1>Current Weather for </h1> 
    <div class="img" id="data-img"></div> 
    <ul> 
     <li><b>Conditions:</b> <span id="data-current"></span></li> 
     <li><b>Temperature:</b> <span id="data-temp"></span>&deg;</li> 
     <li><b>Humidity:</b> <span id="data-humidity"></span>%</li> 
     <li><b>Wind Speed:</b> <span id="data-wind"></span>mph</li> 
     <li id="zip"></li> 
     <li id="country"></li> 
     <li id="api"></li> 
    </ul> 
    </section> 
    <script> 
     var zipcode = '27560'; 
     var appid = 'XXXXXXXXXXXXXXXXXXXXXX'; 
     var startdate = '2015-10-01'; 
     var enddate = '2015-10-28'; 

     $.getJSON('http://api.worldweatheronline.com/premium/v1/past-weather.ashx?q='+ zipcode +'&format=json&date='+ startdate +'&enddate='+ enddate +'&key='+ appid, function(data){ 
      console.log(data); 
      $("#data-current").text(data.weather[0].date); 
      $("#data-temp").text(data.hourly[0].tempF); 
      $("#data-humidity").text(data.hourly[0].humidity); 
      $("#data-wind").text(data.hourly[0].windspeedMiles); 
     }) 
     .fail(function(jqxhr, textStatus, error) { 
     console.log("Request Failed" + textStatus + "," + error); 
     }); 
    </script> 
</body> 
</html> 
+0

Просьба предоставить данные вы получаете для 'console.log (data);'? – deepakb

ответ

1

JSON вернулся из этого JSON потока имеет следующую структуру:

{ 
    data: { 
     request: [], 
     weather: [ 
      hourly: [] 
     ], 
    } 
} 

Это означает, что объект, который вы получите в качестве возврата из getJSON вызова имеет атрибут данных, но вы пытаетесь получить доступ к свойству weather на уровне, где он имеет только data.

Вы должны изменить свой код:

$("#data-current").text(data.data.weather[0].date); 
$("#data-temp").text(data.data.weather[0].hourly[0].tempF); 
$("#data-humidity").text(data.data.weather[0].hourly[0].humidity); 
$("#data-wind").text(data.data.weather[0].hourly[0].windspeedMiles); 
+1

спасибо @Loyalar, что он разбирает первый запрос: но я получаю ошибки на оставшихся. – Phantom

+0

это помогло @Loyalar, но я получаю ошибку по трем запросам ниже первой, любые идеи? – Phantom

+0

Ах. Это потому, что атрибут 'hourly' находится на объекте' weather', а не на объекте 'data'. Я отредактирую свой пост, чтобы это отразить. – Loyalar

1
<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <title>Temp</title> 
    <style> 
    html {margin:2em; font-size:2em; font-family:Helvetica, Arial, sans-serif;} 
    h1 {margin:0 0 0.2em; color:#369;} 
    img {float:left; margin-right:1em;} 
    ul {float:left; margin:0; padding:0; list-style:none;} 
    </style> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
</head> 
<body> 
    <section> 
    <h1>Current Weather for </h1> 
    <div class="img" id="data-img"></div> 
    <ul> 
     <li><b>Conditions:</b> <span id="data-current"></span></li> 
     <li><b>Temperature:</b> <span id="data-temp"></span>&deg;</li> 
     <li><b>Humidity:</b> <span id="data-humidity"></span>%</li> 
     <li><b>Wind Speed:</b> <span id="data-wind"></span>mph</li> 
     <li id="zip"></li> 
     <li id="country"></li> 
     <li id="api"></li> 
    </ul> 
    </section> 
    <script> 
     var zipcode = '27560'; 
     var appid = '96afa96cadeb7165258ae95b77fdc'; 
     var startdate = '2015-10-01'; 
     var enddate = '2015-10-28'; 

     $.getJSON('http://api.worldweatheronline.com/premium/v1/past-weather.ashx?q='+ zipcode +'&format=json&date='+ startdate +'&enddate='+ enddate +'&key='+ appid, function(data){ 
      var data = data.data; 
      $("#data-current").text(data.weather[0].date); 
      $("#data-temp").text(data.hourly[0].tempF); 
      $("#data-humidity").text(data.hourly[0].humidity); 
      $("#data-wind").text(data.hourly[0].windspeedMiles); 
     }) 
     .fail(function(jqxhr, textStatus, error) { 
     console.log("Request Failed" + textStatus + "," + error); 
     }); 
    </script> 
</body> 
</html> 
0

ваши данные data.data; и вы не читаете индексы properly.change сценарий к этому:

<script> 
     var zipcode = '27560'; 
     var appid = '96afa96cadeb7165258ae95b77fdc'; 
     var startdate = '2015-10-01'; 
     var enddate = '2015-10-28'; 

     $.getJSON('http://api.worldweatheronline.com/premium/v1/past-weather.ashx?q='+ zipcode +'&format=json&date='+ startdate +'&enddate='+ enddate +'&key='+ appid, function(data){ 

      var newdata=data.data; 
      console.log(newdata); 
      $("#data-current").text(newdata.weather[0].date); 
      $("#data-temp").text(newdata.weather[0].hourly[0].tempF); 
      $("#data-humidity").text(newdata.weather[0].hourly[0].humidity); 
      $("#data-wind").text(newdata.weather[0].hourly[0].windspeedMiles); 
     }) 
     .fail(function(jqxhr, textStatus, error) { 
     console.log("Request Failed" + textStatus + "," + error); 
     }); 
    </script> 
Смежные вопросы