使用jQuery AJAX请求返回JSON嵌套数组时显示[object Object]求助

我完全懂你现在的困扰——其他JSON请求都正常，偏偏嵌套数组返回后显示成[object Object]，看不到实际内容，这确实挺闹心的。咱们来一步步拆解问题，搞定它！

为啥会出现[object Object]？ #

其实原因很简单：当你尝试直接把JavaScript对象（或者对象数组）当作字符串输出时，JS默认会调用对象的toString()方法，而这个方法的默认返回值就是[object Object]。说白了就是你没正确处理嵌套的对象结构，直接把整个对象丢去显示了。

具体解决办法 #

结合你的AJAX场景，给你几个实用的方案：

1. 先调试：用JSON.stringify()查看完整结构 #

如果你只是想先确认后端返回的嵌套数据到底是什么样的，可以用JSON.stringify()把整个数据序列化成字符串，这样就能在控制台看到完整的嵌套结构了：

$.ajax({
  url: "HIDDEN-URL&format=jsonp",
  type: "get",
  async: true,
  dataType: "jsonp", // 别忘了设对dataType，jsonp请求必须指定这个
  success: function(data) {
    // 把数据转成带缩进的字符串，方便查看
    console.log(JSON.stringify(data, null, 2));
  },
  error: function(err) {
    console.log("请求出错：", err);
  }
});

2. 遍历嵌套数组，提取具体属性显示 #

如果要把嵌套数组里的内容显示到页面上，就得遍历数组，逐个提取每个对象里的属性。举个例子，假设后端返回的JSONP结构是这样的：

{
  "list": [
    {
      "title": "主标题1",
      "subItems": [{"name": "子项1"}, {"name": "子项2"}]
    }
  ]
}

那前端处理代码可以这么写：

$.ajax({
  url: "HIDDEN-URL&format=jsonp",
  type: "get",
  async: true,
  dataType: "jsonp",
  success: function(response) {
    // 拿到嵌套数组
    const subItems = response.list[0].subItems;
    // 遍历数组，提取每个对象的name属性
    subItems.forEach(item => {
      console.log(item.name); // 控制台会输出"子项1"、"子项2"
      // 如果要显示到页面，比如追加到id为content的元素里
      $("#content").append(`<p>${item.name}</p>`);
    });
  }
});

3. 检查后端返回的JSONP格式是否合法 #

还有一种可能：后端返回的JSONP本身有语法错误（比如嵌套结构里的引号、逗号写错了），导致jQuery解析出来的对象异常。你可以直接在浏览器地址栏访问那个URL，看看返回的JSONP内容是不是符合标准格式，有没有语法问题。

额外提醒 #

你的AJAX代码里contentType写了一半，注意如果是jsonp请求，其实不需要设置contentType（因为jsonp本质是加载脚本，不是POST请求），重点是把dataType设为jsonp，这样jQuery才能正确处理回调。

内容的提问来源于stack exchange，提问作者John Richards