Question

我想在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_PARTITIONS ..而第二张桌子我需要所有的年龄组。我能以任何方式做到吗？我尝试了以下内容......但不知道如何为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');

Answer 1

对于第一张表，

$('<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');

Fiddle Demo

用于创建第二个表

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

Fiddle Demo

Answer 2

试试这个，

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

}

在您的情况下，您需要遵循这样的json语法，

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

演示网址http://jsfiddle.net/VxL8J/

从Ajax响应创建HTML表

2 个答案: