Javascript 从Ajax响应创建HTML表

我想创建两个单独的关于ajax调用成功的表。我正在获取以下格式的JSON数据

                {
  "id" : "AgeGroups",
  "simpleFields" : {
    "STATE" : "Master",
    "NUM_PARTITIONS" : "12",
  },
  "listFields" : {
  },
  "mapFields" : {
    "Agegroup1" : {
      "Name1" : "10",
      "Name2" : "15",
      "Name3" : "18"
    },
    "AgeGroup2" : {
      "Name1" : "21",
      "Name1" : "25",
      "Name1" : "27"
    },

因此，第一个表我只需要

id、state

和

NUM\u分区

。。第二张桌子我需要所有年龄组。。我有什么办法可以做吗？ 我尝试了以下方法…但不确定如何处理2表

试过这个

              $('<table>').html(
              "<thead> " +
                      "<tr>" +
                      "<th> <strong> ID </strong>  </th>" +
                      "<th> <strong> State </strong></th> " +
                      "<th> <strong> NumPartitons </strong></th>" +
                      "</r> </thead>" +
                      " <tbody>" +
                      " <tr>" +
                      "<td>" + response.ID + "</td>" +
                      "<td>"+response.State +"</td>" +
                      "<td>"+ response.Partitons +"</td> " +
                      "</tr>" +
                      "</tbody>" +
                      "</table>"
    ).appendTo('#resulttable');    

$（''）.html(
" " +
"" +
“ID”+
“状态”+
“NumPartitons”+
" " +
" " +
" " +
“”+response.ID+“”+
“”+response.State+“”+
“”+响应。Partitons+“”+
"" +
"" +
""
).appendTo（“#可结式”）；

对于第一个表

$('<table>').html(
        "<thead> " +
        "<tr>" +
        "<th> <strong> ID </strong>  </th>" +
        "<th> <strong> State </strong></th> " +
        "<th> <strong> NumPartitons </strong></th>" +
        "</r> </thead>" +
        " <tbody>" +
        " <tr>" +
        "<td>" + response.id + "</td>" +
        "<td>" + response.simpleFields.STATE + "</td>" +
        "<td>" + response.simpleFields.NUM_PARTITIONS + "</td> " +
        "</tr>" +
        "</tbody>" +
        "</table>"
        ).appendTo('#resulttable');

$（''）.html(
" " +
"" +
“ID”+
“状态”+
“NumPartitons”+
" " +
" " +
" " +
“”+response.id+“”+
“”+response.simpleFields.STATE+“”+
“”+response.simpleFields.NUM_分区+“”+
"" +
"" +
""
).appendTo（“#可结式”）；

用于创建第二个表

var a = "";
$.each(response.mapFields, function() {
    a += (" <tr>" +
            "<td>" + this.Name1 + "</td>" +
            "<td>" + this.Name2 + "</td>" +
            "<td>" + this.Name3 + "</td> " +
            "</tr>");
});
$('<table>').html(
        "<thead> " +
        "<tr>" +
        "<th> <strong> Name1</strong>  </th>" +
        "<th> <strong> Name2 </strong></th> " +
        "<th> <strong> Name3 </strong></th>" +
        "</r> </thead>" +
        " <tbody>" +
        a
        +
        "</tbody>" +
        "</table>"
        ).appendTo('#resulttable');    

var a=”“；
$.each（response.mapFields，function（）{
a+=（“”+
“”+this.Name1+“”+
“”+this.Name2+“”+
“”+this.Name3+“”+
"");
});
$（''）.html(
" " +
"" +
“名称1”+
“名称2”+
“名称3”+
" " +
" " +
A.
+
"" +
""
).appendTo（“#可结式”）；

试试这个

window.response=[{
  "id" : "AgeGroups",
  "simpleFields" : {
    "STATE" : "Master",
    "NUM_PARTITIONS" : "12",
  },
  "listFields" : {
  },
  "mapFields" : {
    "Agegroup1" : {
      "Name1" : "10",
      "Name2" : "15",
      "Name3" : "18"
    },
    "AgeGroup2" : {
      "Name1" : "21",
      "Name1" : "25",
      "Name1" : "27"
    }
  }
}];
for(i=0;i<response.length;i++){
$('<table>').html(
        "<thead> " +
        "<tr>" +
        "<th> <strong> ID </strong>  </th>" +
        "<th> <strong> State </strong></th> " +
        "<th> <strong> NumPartitons </strong></th>" +
        "</r> </thead>" +
        " <tbody>" +
        " <tr>" +
        "<td>" + response[i]['id'] + "</td>" +
        "<td>" + response[i]['simpleFields']['STATE'] + "</td>" +
        "<td>" + response[i]['simpleFields']['NUM_PARTITIONS'] + "</td> " +
        "</tr>" +
        "</tbody>" +
        "</table>"
        ).appendTo('#resulttable');

}

---

演示url

为什么不编写一些Javascript？似乎是显而易见的解决办法。。。。请允许我们选择提问者是否尝试过任何事情？这仅适用于一个表…我将如何创建下一个表？检查更新的表answer@PranavCBalan非常好的答案+1对你来说是的，这很有效…很快…这部分我已经做过了。我的问题是我们如何创建下一个包含年龄组的表？@user2144794好的，试着用这种方式从服务器发送mpaFields:[“Agegroup1”：{“Name1”：“10”，“Name2”：“15”，“Name3”：“18”}，“AgeGroup2”：{“Name1”：“21”，“Name1”：“25”，“Name1”：“27”}]。所以您可以通过这种方式获得response.mapFields.length。

ID: response.id, STATE: response.simpleFields.STATE