遍历 JSON 并附加到 HTML 表

Question

HTML

<table id="id_kbdata" cellspacing="0" cellpadding="0" >
</table>

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":"test.pdf",
        "url":"http://google.com/test.pdf"
     }
  ],
  "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":"test.pdf",
        "url":"http://google.com/test.pdf"
     }
  ],
  "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":"test.pdf",
        "url":"http://google.com/test.pdf"
     }
  ],
  "error":null
 }
]

在这里，我尝试遍历上面的 JSON 响应并将结果值附加到 HTML 表中。但是做不到，下面是我目前尝试过的。

实际上，我很困惑如何使用 JSON 中的嵌套值，例如“businessSubjectArea”。我只是想附加表 td 中的值和 li 中的嵌套值

$.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.businessSubjectAreas.businessSubjectArea + "</li>"
     }); 
     + "</ul>" +         

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

任何帮助将不胜感激。

Answer 1

在表中包含“tbody”，然后将行追加到它

<table id="id_kbdata" cellspacing="0" cellpadding="0" >
    <tbody></tbody>
</table>

并附加为

var html = "";

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

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

html += "       </ul>";
html += "   </td>";
html += "</tr>";

$("#id_kbdata > tbody").append(html);

希望对你有帮助

Answer 2

我想这会有所帮助。

注意：这是单独使用 js 完成的。

var jsonObj = [{"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":"test.pdf","url":"http://google.com/test.pdf"}],"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":"test.pdf","url":"http://google.com/test.pdf"}],"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":"test.pdf","url":"http://google.com/test.pdf"}],"error":null}];


// using createElement
var myTable = document.getElementById('id_kbdata');
for (var i = 0; i < jsonObj.length; i++) {
  var tbRow = document.createElement('tr');
  var tbData1 = document.createElement('td');
  tbData1.innerHTML = jsonObj[i]['title'];
  var tbData2 = document.createElement('td');
  var bsa = jsonObj[i]['businessSubjectAreas'];
  for (var j = 0; j < bsa.length; j++) {
    var li = document.createElement('li');
    li.innerHTML = bsa[j]['businessSubjectArea'];
    tbData2.append(li);
  }
  tbRow.append(tbData1);
  tbRow.append(tbData2);
  myTable.append(tbRow);
}

//using innerHTML
var html = "";
for (var i = 0; i < jsonObj.length; i++) {
  html += "<tr><td>" + jsonObj[i]['title'] + "</td><td>";
  for (var j = 0; j < bsa.length; j++) {
    html += "<li>" + bsa[j]['businessSubjectArea'] + "</li>";
  }
  html += "</td></tr>";
}
document.getElementById("id_kbdata_1").innerHTML = html;

td {
  text-align: left;
  font-family: arial;
  padding: 5px 10px;
  border-bottom: 1px solid #ccc;
  border-right: 1px solid #ccc;
  width: 33%;
}

<table id="id_kbdata" cellspacing="0" cellpadding="0"></table>
<br>
<table id="id_kbdata_1" cellspacing="0" cellpadding="0" style="color:red"></table>