Question

我需要从JSON获取值并在HTML表格中显示它们。

以下是我的JSON：

[
  {
    "id": "3",
    "title": "Doing Business In...",
    "businessSubjectAreas": [
      {
        "businessSubjectArea": "Market and Sell Products/Service"
      },
      {
        "businessSubjectArea": "Deliver Products/Services"
      },
      {
        "businessSubjectArea": "HR"
      },
      {
        "businessSubjectArea": "Legal"
      },
      {
        "businessSubjectArea": "Finance"
      },
      {
        "businessSubjectArea": "Tax"
      },
      {
        "businessSubjectArea": "Treasury"
      },
      {
        "businessSubjectArea": "IT"
      }
    ],
    "attachmentFiles": [
      {
        "fileName": "Australia.html",
        "url": ""
      }
    ],
    "error": null
  },
  {
    "id": "65",
    "title": "Dialing Instructions",
    "businessSubjectAreas": [
      {
        "businessSubjectArea": "Administrative"
      }
    ],
    "attachmentFiles": [

    ],
    "error": null
  },
  {
    "id": "132",
    "title": "WA - Western Australia - Drilling Fluid Management",
    "businessSubjectAreas": [
      {
        "businessSubjectArea": "Market and Sell Products/Service"
      },
      {
        "businessSubjectArea": "Deliver Products/Services"
      },
      {
        "businessSubjectArea": "Legal"
      }
    ],
    "attachmentFiles": [
      {
        "fileName": "",
        "url": ""
      }
    ],
    "error": null
  },
  {
    "id": "133",
    "title": "WA - Natural gas from shale and tight rock - Overview of WA regulatory framework",
    "businessSubjectAreas": [
      {
        "businessSubjectArea": "Market and Sell Products/Service"
      },
      {
        "businessSubjectArea": "Deliver Products/Services"
      },
      {
        "businessSubjectArea": "Legal"
      }
    ],
    "attachmentFiles": [
      {
        "fileName": "",
        "url": ""
      }
    ],
    "error": null
  }
]

以下是我的jQuery代码：

$.each(json, function(index, value) {
  $("#id_kbdata").append(
    " <tr><td style='text-align:left;font-family:arial;padding:5px 10px;border-bottom:1px solid #ccc;border-right:1px solid #ccc;width:33%;'>" +
    this.title +
    "</td><td style='text-align:left;font-family:arial;padding:5px 10px;border-bottom:1px solid #ccc;border-right:1px solid #ccc;width:33%;'> "

    +
    "<ul>" +
    $.each(this.businessSubjectAreas, function(index, value) {
      "<li>" + this.businessSubjectArea + "</li>"
    }) +
    "</ul>" +

    " </td><td style='text-align:left;font-family:arial;padding:5px 10px;border-bottom:1px solid #ccc;border-right:1px solid #ccc;width:33%;'> "

    +
    "<ul>" +
    $.each(this.attachmentFiles, function(index, value) {
      "<li><a href=" + this.url + ">" + this.fileName + "</a></li>"
    }) +
    "</ul>" +

    " </td></tr>"
  );
});

这里我无法从内部每个循环中获取JSON的值，如this.businessSubjectArea，我将这些值作为[object Object]，this.title正常工作。我已从JSON中删除了值，因为它是敏感数据。

如何使用我的jQuery代码访问值this.businessSubjectArea，this.url等？

Answer 1

使用value作为内部项目

$.each(this.businessSubjectAreas, function(index, value) {
    "<li>" + value.businessSubjectArea + "</li>"
})

同样适用于attachmentFiles

$.each(this.attachmentFiles, function(index, value) {
      "<li><a href=\"" + value.url + "\">" + value.fileName + "</a></li>"
})

Answer 2

Try this ,its working for me

var id;
        $.each(json, function (index, value) {
            id = value.id;
            debugger;
            $("#id_kbdata").append(
                " <tr><td style='text-align:left;font-family:arial;padding:5px 10px;border-bottom:1px solid #ccc;border-right:1px solid #ccc;width:33%;'>"
                + value.title +
                "</td><td style='text-align:left;font-family:arial;padding:5px 10px;border-bottom:1px solid #ccc;border-right:1px solid #ccc;width:33%;'> "
                + "<ul id='demoul_"+value.id+"'></ul>" +
                " </td><td style='text-align:left;font-family:arial;padding:5px 10px;border-bottom:1px solid #ccc;border-right:1px solid #ccc;width:33%;'> "
                + "<ul id='demourl_" + value.id + "'></ul>" +

                " </td></tr>"
            );

            $.each(value.businessSubjectAreas, function (index, value) {
                $('#demoul_' + id + '').append("<li>" + value.businessSubjectArea + "</li>");
            })
            $.each(value.attachmentFiles, function (index, value) {
                $('#demourl_' + id + '').append("<li><a href=" + value.url + ">" + value.fileName + "</a></li>");
            })
        });

从每个循环中获取嵌套json的值

2 个答案: