Получение данных из API с помощью AJAX

Question

Я пытаюсь получить данные из API и отобразить их с помощью AJAX. У меня есть этот код

 $(document).ready(function(){  
          $('.show').click(function(){     
          $.ajax({
           url: 'url',
           dataType: 'json',
           success: function(data) {
              var items = [];
              $.each(data, function(key, val) {

                items.push('<li id="' + key + '">' + val + '</li>');    

              });

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

           },
          statusCode: {
             404: function() {
               alert('There was a problem with the server.  Try again soon!');
             }
           }
    });
    });
    });

У меня есть такой результат:

[object Object],[object Object],[object Object],[object Object],

Что я должен исправить в своем коде

Answer 1

$.each перебирает массив, key - индекс массива, val - весь объект

Вы можете изменить эту строку кода

items.push('<li id="' + key + '">' + val + '</li>');

до

var key = Object.keys(val)[0];
items.push('<li id="' + key + '">' + val[key] + "</li>"); 

, чтобы просто получить первый ключ напрямую.Вот документация для Object.keys .

Answer 2

Прежде всего, вам лучше добавить поле type:'GET', чтобы определить, какой тип вызова вы делаете.Затем вы можете использовать var json = JSON.parse(data) для чтения всех входящих данных из data, например:

var time = json['foo'];

или, если у вас есть массив:

var time = json[index]['foo'];

, вы можете найти более подробную информациюздесь https://www.w3schools.com/js/js_json_parse.asp и здесь https://developer.mozilla.org/it/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse