PhoneGap中JSON解析与数据列表展示功能失效问题

你已经成功搞定了API调用和响应获取，只是在数据解析展示的环节踩了个小坑——你用了jQuery的DOM查找方法（find()）去处理JSON对象，这可不行哦，JSON是纯数据对象，不是HTML DOM节点，自然没法用DOM操作方法来提取数据~

先帮你理清楚目标API的返回结构，它是这样的：

{
  "contacts": [
    {
      "id": "c200",
      "name": "Ravi Tamada",
      "email": "ravi@gmail.com",
      ...
    },
    ...
  ]
}

你不需要用$(json).find("contacts")这种DOM查找逻辑，直接访问json.contacts这个数组就可以了，然后遍历数组里的每个联系人对象，提取对应字段构建HTML就行。

修改后的代码如下：

function getContactList() {
  console.log("Entering getContactList()");
  $.ajax({
    url: "https://api.androidhive.info/contacts/",
    dataType: "json",
    cache: false,
    error: function(xhr, ajaxOptions, thrownError) {
      debugger;
      alert(xhr.statusText);
      alert(thrownError);
    },
    success: function(json) {
      console.log("====CONTACTLIST ---->", json);
      // 先清空容器，避免多次点击重复添加（可选但推荐）
      $('#contacts').empty();
      // 直接遍历contacts数组
      json.contacts.forEach(function(contact) {
        // 从联系人对象里直接取name属性
        var html = '<li>' + contact.name + '</li>';
        $('#contacts').append(html);
      });
    }
  });
}

关键注意点： #

• 别把JSON当DOM：jQuery的find()、text()是用来操作HTML元素的，处理JSON要直接访问对象属性，比如contact.name。
• 遍历方式灵活选：除了forEach，你也可以用jQuery的$.each()来遍历数组：

  $.each(json.contacts, function(index, contact) {
    var html = '<li>' + contact.name + '</li>';
    $('#contacts').append(html);
  });
  

• 清空容器防重复：如果多次点击按钮调用函数，提前用$('#contacts').empty()清空原有内容，避免列表重复叠加。

这样修改后，就能正常把联系人列表展示出来啦！

内容的提问来源于stack exchange，提问作者concentrate H2SO4