Невозможно получить значения погоды из API с jquery

Question

Я пытаюсь получить значения погоды из API погоды, но не могу взять название города и другие свойства. Когда я пытаюсь сделать sh, они в элементах массива не могут проецировать его на HTML страницу

См. Код ниже:

var url = "https://api.weatherbit.io/v2.0/forecast/daily?city=london,gb,&key=f0e406af6ebf4937862f9f50ae78125b";

function getWeather(){
$.getJSON( url, function( data ) {
  var items = [];
  $.each( data, function( key, val ) {
    var weather = {
      cityName:val.city_name,
      longtitude:val.lon,
      timezone:val.timezone,
      latitude:val.lat,
      countryState:val._state
    }


    items.push("<li>"+weather+"</li>");
  });

  $( "<ul/>", {
    "class": "my-new-list",
    html: items.join( "" )
  }).appendTo( "body" );
});
}

Answer 1

Вы можете получить доступ к этим свойствам, как в демонстрации.

Вот работает Демо: https://jsfiddle.net/usmanmunir/acghx45z/19/

var url = "https://api.weatherbit.io/v2.0/forecast/daily?city=london,gb,&key=f0e406af6ebf4937862f9f50ae78125b";

function getWeather(){
$.getJSON( url, function( data ) {
  var items = [];
  let newData = {}
    $.each(data, function( key, val ) {
      if (key != 'data') {
        newData[key] = data[key]
      } 
    });
    $.each(newData, function( key, val ) {
      items.push("<li>"+key+" : "+val+"</li>");
    });
    
  $( "<ul/>", {"class": "my-new-list",html: items}).appendTo( "body" );
 });
}

getWeather()

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 2

Вот упрощенная версия:

var url = "https://api.weatherbit.io/v2.0/forecast/daily?city=london,gb,&key=f0e406af6ebf4937862f9f50ae78125b";

function getWeather(){
$.getJSON( url, function( data ) {
  var items = [];

  items.push("<li>"+data.city_name+"</li>");
  items.push("<li>"+data.lon+"</li>");
  items.push("<li>"+data.timezone+"</li>");
  items.push("<li>"+data.lat+"</li>");
  items.push("<li>"+data.state_code+"</li>");


  $( "<ul>", {
    "class": "my-new-list",
    html: items.join( "" )
  }).appendTo( "body" );
});
}

getWeather();

Вам не нужен al oop. Фактически, из того, что вы пытаетесь сделать, al oop не имеет смысла, если все, что вы пытаетесь получить, - это указанные c значения.

В вашем коде вы l oop над каждым ключом в объекте данных и создавайте новый объект с каждой итерацией, который затем помещается в ваш массив элементов. Вы также пытаетесь получить доступ к неопределенным значениям.

Ответ сверху неверен, поскольку он проходит через все ключи в объекте, который сам может быть объектом, и приводит к некорректному выводу, например [объект].

Посмотрите документацию на mozilla: Javascript - Работа с объектами