时间戳

首页 > 解决方案 > Ajax response not fetching all result

jquery - Ajax response not fetching all result

问题描述

I am trying to fetch some results from database and display them to a table. I am getting the full response which is as below,

Response payload 

{"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"
}

I displayed them into a table by the below code

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);
                   }

But I am getting only limited groupnames, but there are total 9 group names in the result. When I alert Object.keys(data).length it gives me only 4. So I need to loop through the whole groupnames. Thanks in advance.

标签： jqueryajaxappendresponse

解决方案

您正在4从下面的代码中获取长度，因为里面有 4 个对象，data它们是groupname、和。question_countimg_urldrag_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在控制台上打印，而不是附加到表格中进行演示。

推荐阅读