使用 jQuery 或 Javascript 将对象数组转换为 HTML 表格答案

【问题标题】：Convert array of objects into HTML table with jQuery or Javascript使用 jQuery 或 Javascript 将对象数组转换为 HTML 表格
【发布时间】：2022-01-13 22:14:39
【问题描述】：

如何转换以下对象的 Javascript 数组

 [{"firstName":"John", "last Name":"Doe", "age":"46"},
 {"firstName":"James", "last Name":"Blanc", "age":"24"}]

进入下面的 HTML 表格

<table>
   <tr>
      <th>firstName</th>
      <th>last Name</th>
      <th>age</th>
   </tr>
   <tr>
      <td>John</td>
      <td>Doe</tD>
      <td>46</th>
   </tr>
   <tr>
      <td>James</td>
      <td>Blanc</tD>
      <td>24</th>
   </tr>
</table>

提前致谢。

【问题讨论】：

你可以在这里查看Your Answer
How to print jquery object/array的可能重复

标签： javascript jquery html

【解决方案1】：

您可以使用forEach 方法执行此操作，该方法接受callback 提供的函数作为参数。

var users=[{"firstName":"John", "last Name":"Doe", "age":"46"},
 {"firstName":"James", "last Name":"Blanc", "age":"24"}]
users.forEach(function(item){
  $('tbody').append('<tr><td>'+item.firstName+'</td><td>'+item["last Name"]+'</td><td>'+item.age+'</td></tr>')
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<th>firstName</th>
<th>last Name</th>
<th>age</th>
</tr>
</thead>
<tbody>

</tbody>
</table>

【讨论】：

【解决方案2】：

试试这个代码：

var rows = [{"firstName":"John", "last Name":"Doe", "age":"46"},
 {"firstName":"James", "last Name":"Blanc", "age":"24"}];
 var html = '<table>';
 html += '<tr>';
 for( var j in rows[0] ) {
  html += '<th>' + j + '</th>';
 }
 html += '</tr>';
 for( var i = 0; i < rows.length; i++) {
  html += '<tr>';
  for( var j in rows[i] ) {
    html += '<td>' + rows[i][j] + '</td>';
  }
  html += '</tr>';
 }
 html += '</table>';
 document.getElementById('container').innerHTML = html;

<div id="container">
</div>

【讨论】：

【解决方案3】：

在您的 HTML 中放入以下代码

<div id="myTable">

</div>

并在脚本中放入以下代码

var arrObj = [{"firstName":"John", "lastName":"Doe", "age":"46"},
 {"firstName":"James", "lastName":"Blanc", "age":"24"}]
 var objLength = arrObj.length;
var myvar = '<table>'+
'<tr>'+
'<th>firstName</th>'+
'<th>last Name</th>'+
'<th>age</th>'+
'</tr>';

 for(var i = 0; i < objLength; i++){
myvar += '<tr>'+
'<td>'+arrObj[i].firstName+'</td>'+
'<td>'+arrObj[i].lastName+'</tD>'+
'<td>'+arrObj[i].age+'</th>'+
'</tr>'     
 }

 myvar += '</table>';

console.log(myvar);
 document.getElementById('myTable').innerHTML = myvar;

希望这可行

【讨论】：