循环到JS对象中以填充表_For循环到模板中的js对象_Highcharts循环JSON对象以填充数据序列 - 腾讯云开发者社区

循环到JS对象中以填充表

基础概念

在JavaScript中，对象是一种复合数据类型，可以包含多个键值对（key-value pairs）。循环遍历对象的属性并填充表格是一种常见的操作，通常用于动态生成表格内容。

类型

for...in循环：遍历对象的所有可枚举属性。
Object.keys()方法：返回一个包含对象自身所有可枚举属性名称的数组，然后可以遍历这个数组。
Object.entries()方法：返回一个给定对象自身可枚举属性的键值对数组，其排列与使用for...in循环的顺序一致（两者的主要区别是for-in还会枚举原型链中的属性）。

应用场景

数据展示：将后端返回的数据动态填充到前端表格中。
报表生成：根据不同的数据源生成不同的报表。
数据编辑：提供一个表格让用户编辑数据，并将数据保存回后端。

示例代码

假设我们有一个对象数组，每个对象代表一个用户的信息：

const users = [
  { id: 1, name: 'Alice', age: 25 },
  { id: 2, name: 'Bob', age: 30 },
  { id: 3, name: 'Charlie', age: 35 }
];

我们可以使用Object.keys()方法来遍历对象的属性并填充表格：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Dynamic Table</title>
</head>
<body>
  <table id="userTable" border="1">
    <thead>
      <tr>
        <th>ID</th>
        <th>Name</th>
        <th>Age</th>
      </tr>
    </thead>
    <tbody>
    </tbody>
  </table>

  <script>
    const users = [
      { id: 1, name: 'Alice', age: 25 },
      { id: 2, name: 'Bob', age: 30 },
      { id: 3, name: 'Charlie', age: 35 }
    ];

    const tableBody = document.querySelector('#userTable tbody');

    users.forEach(user => {
      const row = document.createElement('tr');
      Object.values(user).forEach(value => {
        const cell = document.createElement('td');
        cell.textContent = value;
        row.appendChild(cell);
      });
      tableBody.appendChild(row);
    });
  </script>
</body>
</html>