使用AJAX从API获取数据

时间:2019-02-18 14:04:13

标签: javascript json api get

我正在尝试从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],

我必须在代码中解决什么?

2 个答案:

答案 0 :(得分: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

答案 1 :(得分:0)

首先,最好添加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

中找到更多详细信息