javascript - 将对象数组转换为表格的 HTML 标记

Question

我有以下数组

[
  { label: 'Untitled', results: '1234', sequence: 2, entry_id: 1 },
  { label: 'Last Name*', results: 'ggg', sequence: 4, entry_id: 1 },
  { label: 'Country', results: 'India', sequence: 3, entry_id: 1 },
  { label: 'Category', results: 'test', sequence: 6, entry_id: 1 },
  { label: 'address', results: '', sequence: 5, entry_id: 1 },
  { label: 'Untitled', results: '1234', sequence: 2, entry_id: 1 },
  { label: 'Last Name*', results: 'ggg', sequence: 4, entry_id: 1 },
  { label: 'Country', results: 'India', sequence: 3, entry_id: 1 },
  { label: 'Category', results: 'test', sequence: 6, entry_id: 1 },
  { label: 'address', results: '', sequence: 5, entry_id: 1 },
  { label: 'Untitled', results: '1234', sequence: 2, entry_id: 1 },
  { label: 'Last Name*', results: 'ggg', sequence: 4, entry_id: 1 },
  { label: 'Country', results: 'India', sequence: 3, entry_id: 1 },
  { label: 'Category', results: 'test', sequence: 6, entry_id: 1 },
  { label: 'address', results: 'address', sequence: 5, entry_id: 1 },
  { label: 'Untitled', results: '1234', sequence: 2, entry_id: 1 },
  { label: 'Last Name*', results: 'bansal', sequence: 4, entry_id: 1 },
  { label: 'Country', results: 'India', sequence: 3, entry_id: 1 },
  { label: 'Category', results: 'test', sequence: 6, entry_id: 1 },
  { label: 'address', results: '', sequence: 5, entry_id: 1 },
  { label: 'Untitled', results: '1234', sequence: 2, entry_id: 2 },
  { label: 'Last Name*', results: 'ggg', sequence: 4, entry_id: 2 },
  { label: 'Country', results: 'India', sequence: 3, entry_id: 2 },
  { label: 'Category', results: 'test', sequence: 6, entry_id: 2 },
  { label: 'address', results: '', sequence: 5, entry_id: 2 },
  { label: 'Untitled', results: '1234', sequence: 2, entry_id: 3 },
  {
    label: 'Last Name*',
    results: 'sss.ca',
    sequence: 4,
    entry_id: 3
  },
  { label: 'Country', results: 'India', sequence: 3, entry_id: 3 },
  { label: 'Category', results: 'test', sequence: 6, entry_id: 3 },
  { label: 'address', results: '', sequence: 5, entry_id: 3 },
  { label: 'Untitled', results: '1234', sequence: 2, entry_id: 4 },
  {
    label: 'Last Name*',
    results: 'ssss.ca',
    sequence: 4,
    entry_id: 4
  },
  { label: 'Country', results: 'India', sequence: 3, entry_id: 4 },
  { label: 'Category', results: 'test', sequence: 6, entry_id: 4 },
  { label: 'address', results: 'add', sequence: 5, entry_id: 4 }
]

我需要转换成 HTML 表格

> <table><tr><th>Untitled</th><th>Last
> Name*</th><th>Category</th><th>address</th></tr>
> 
> <tr><td>1234</td><td>ggg</td><td>test</td><td></td></tr> .... ... so
> on  </table>

谁能告诉我如何制作一个数组来简化这个，以便我可以创建一个表？我们需要多维数组吗？我需要最终的 html 字符串。请有什么技巧

谢谢

标签： javascripthtml

Answer 1

下面是一个使用 JS 的解决方案示例：

var html_code = "<table><tr><th>label</th><th>results</th><th>sequence</th><th>entry_id</th></tr>";
var arr= [
  { label: 'Untitled', results: '1234', sequence: 2, entry_id: 1 },
  { label: 'Last Name*', results: 'ggg', sequence: 4, entry_id: 1 },
  { label: 'Country', results: 'India', sequence: 3, entry_id: 1 },
  { label: 'Category', results: 'test', sequence: 6, entry_id: 1 },
  { label: 'address', results: '', sequence: 5, entry_id: 1 },
  { label: 'Untitled', results: '1234', sequence: 2, entry_id: 1 },
  { label: 'Last Name*', results: 'ggg', sequence: 4, entry_id: 1 },
  { label: 'Country', results: 'India', sequence: 3, entry_id: 1 },
  { label: 'Category', results: 'test', sequence: 6, entry_id: 1 },
  { label: 'address', results: '', sequence: 5, entry_id: 1 },
  { label: 'Untitled', results: '1234', sequence: 2, entry_id: 1 },
  { label: 'Last Name*', results: 'ggg', sequence: 4, entry_id: 1 },
  { label: 'Country', results: 'India', sequence: 3, entry_id: 1 },
  { label: 'Category', results: 'test', sequence: 6, entry_id: 1 },
  { label: 'address', results: 'address', sequence: 5, entry_id: 1 },
  { label: 'Untitled', results: '1234', sequence: 2, entry_id: 1 },
  { label: 'Last Name*', results: 'bansal', sequence: 4, entry_id: 1 },
  { label: 'Country', results: 'India', sequence: 3, entry_id: 1 },
  { label: 'Category', results: 'test', sequence: 6, entry_id: 1 },
  { label: 'address', results: '', sequence: 5, entry_id: 1 },
  { label: 'Untitled', results: '1234', sequence: 2, entry_id: 2 },
  { label: 'Last Name*', results: 'ggg', sequence: 4, entry_id: 2 },
  { label: 'Country', results: 'India', sequence: 3, entry_id: 2 },
  { label: 'Category', results: 'test', sequence: 6, entry_id: 2 },
  { label: 'address', results: '', sequence: 5, entry_id: 2 },
  { label: 'Untitled', results: '1234', sequence: 2, entry_id: 3 },
  {
    label: 'Last Name*',
    results: 'sss.ca',
    sequence: 4,
    entry_id: 3
  },
  { label: 'Country', results: 'India', sequence: 3, entry_id: 3 },
  { label: 'Category', results: 'test', sequence: 6, entry_id: 3 },
  { label: 'address', results: '', sequence: 5, entry_id: 3 },
  { label: 'Untitled', results: '1234', sequence: 2, entry_id: 4 },
  {
    label: 'Last Name*',
    results: 'ssss.ca',
    sequence: 4,
    entry_id: 4
  },
  { label: 'Country', results: 'India', sequence: 3, entry_id: 4 },
  { label: 'Category', results: 'test', sequence: 6, entry_id: 4 },
  { label: 'address', results: 'add', sequence: 5, entry_id: 4 }
];
for(var i=0;i<arr.length;i++)
{
   html_code+="<tr><td>"+ arr[i].label  +"</td><td>"+ arr[i].results  +"</td><td>"+ arr[i].sequence  +"</td><td>"+ arr[i].entry_id  +"</td></tr>";
}
html_code+="</table>";

document.getElementById("test").innerHTML = html_code;

<div id="test"></div>