使用 AJAX 从 API 获取数据答案

【问题标题】：Getting data from API with AJAX使用 AJAX 从 API 获取数据
【发布时间】：2019-02-18 14:04:13
【问题描述】：

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

我必须在我的代码中修复什么？

【问题讨论】：

@Islam Elshobokshy ，它必须添加到正文中，但它只是添加[Object Object]，[object Object]，[object Object]，[object Object]。
代码 - jsfiddle.net/8ut5q62k

标签： javascript json api get

【解决方案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.

【讨论】：

【解决方案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找到更多细节

【讨论】：

默认type是GET，dataType设置为json所以数据已经转换好了，不用JSON.parse