Ajax 响应未获取所有结果答案

【问题标题】：Ajax response not fetching all resultAjax 响应未获取所有结果
【发布时间】：2019-12-26 08:38:34
【问题描述】：

我正在尝试从数据库中获取一些结果并将它们显示到表格中。我得到了如下的完整回复，

响应负载

{"groupname":
 [
  {
   "id":12,"group_name":"sd"
  },
  {
   "id":11,"group_name":"ghf"
  },
  {
   "id":10,"group_name":"sdf"
  },
  {
   "id":9,"group_name":"dsf"
  },
  {
   "id":5,"group_name":"g"
  },
  {
   "id":4,"group_name":"too"
  },
  {
   "id":3,"group_name":"lol"
  },
  {
   "id":2,"group_name":"hh"
  },
  {
   "id":1,"group_name":"TestGroup"}

 ],
"question_count":
 [
  {
   "count":1
  },
  {
   "count":3
  },
  {
   "count":1
  },
  {
   "count":6
  },
  {
   "count":1
  },
 {
  "count":5
 }
],
"img_url":"http:\/\/localhost\/O2X\/Trunk\/Web\/public\/admin\/images\/icn_close.png",
"drag_img_url":"http:\/\/localhost\/O2X\/Trunk\/Web\/public\/admin\/images\/drag-handle.png"
}

我通过以下代码将它们显示在表格中

for (var i = 0; i <= Object.keys(data).length; i++) {
  if (data.groupname[i].group_name) {
              txt = '<tr class="row1" data-id="' + data.groupname[i].id + '"><td>' + data.groupname[i].group_name + '</td>';
                        }
           $("#table").append(txt);
                   }

但我只得到有限的组名，但结果中总共有 9 个组名。当我提醒 Object.keys(data).length 它只给我 4 个。所以我需要遍历整个组名。提前致谢。

【问题讨论】：

请使用 Javascript 语法为您的输入发布一个有效的对象结构。
如果 groupname 是 for 循环中的数组，则使用 groupname.length 而不是 Object.keys(data)。如果groupname 是对象/字典，则执行for (key in Object.keys(data)) 并以data[key]["group_name"] 访问它。如果您适当地发布您的 JSON 结构，它将更容易理解和找出问题。
我已经更新了我的问题。
@Oops 请看答案。如果你想遍历组，你应该做Object.keys(data.groupname).length。另外，请使用 < 而不是 'length。

标签： jquery ajax append response

【解决方案1】：

你从下面的代码中得到长度4，因为你在data中有4个对象，它们是groupname、question_count、img_url和drag_img_url。

Object.keys(data).length

如果你想遍历组，你应该这样做：

Object.keys(data.groupname).length

其次，您使用<= 而不是<，因为您使用的是length。

正如我在对原始帖子的评论中提到的那样，由于groupname 是一个数组，您可以使用它的length 并进行迭代。

var data = {
    "groupname": [{ "id": 12, "group_name": "sd" }, { "id": 11, "group_name": "ghf" }, { "id": 10, "group_name": "sdf" }, { "id": 9, "group_name": "dsf" }, { "id": 5, "group_name": "g" }, { "id": 4, "group_name": "too" }, { "id": 3, "group_name": "lol" }, { "id": 2, "group_name": "hh" }, { "id": 1, "group_name": "TestGroup" }],
    "question_count": [{ "count": 1 }, { "count": 3 }, { "count": 1 }, { "count": 6 }, { "count": 1 }, { "count": 5 }], "img_url": "http:\/\/localhost\/O2X\/Trunk\/Web\/public\/admin\/images\/icn_close.png", "drag_img_url": "http:\/\/localhost\/O2X\/Trunk\/Web\/public\/admin\/images\/drag-handle.png"
};
for (var i = 0; i < data.groupname.length; i++) {
    if (data.groupname[i].group_name) {
        txt = '<tr class="row1" data-id="' + data.groupname[i].id + '"><td>' + data.groupname[i].group_name + '</td>';
    }
    console.log(txt);
}

更短的语法：

var data = {
    "groupname": [{ "id": 12, "group_name": "sd" }, { "id": 11, "group_name": "ghf" }, { "id": 10, "group_name": "sdf" }, { "id": 9, "group_name": "dsf" }, { "id": 5, "group_name": "g" }, { "id": 4, "group_name": "too" }, { "id": 3, "group_name": "lol" }, { "id": 2, "group_name": "hh" }, { "id": 1, "group_name": "TestGroup" }],
    "question_count": [{ "count": 1 }, { "count": 3 }, { "count": 1 }, { "count": 6 }, { "count": 1 }, { "count": 5 }], "img_url": "http:\/\/localhost\/O2X\/Trunk\/Web\/public\/admin\/images\/icn_close.png", "drag_img_url": "http:\/\/localhost\/O2X\/Trunk\/Web\/public\/admin\/images\/drag-handle.png"
};
data.groupname.forEach(token => {
    txt = '<tr class="row1" data-id="' + token.id + '"><td>' + token.group_name + '</td>';
    console.log(txt);
});

注意：我在控制台上打印了txt，而不是附加到表格中进行演示。

【讨论】：