将JSON数组的数据输出为HTML

// 假设JSON数组数据如下
var jsonArray = [
  { "name": "John", "age": 25, "city": "New York" },
  { "name": "Jane", "age": 30, "city": "San Francisco" },
  { "name": "Bob", "age": 35, "city": "Seattle" }
];

// 创建HTML模板
var htmlTemplate = `
  <table>
    <thead>
      <tr>
        <th>Name</th>
        <th>Age</th>
        <th>City</th>
      </tr>
    </thead>
    <tbody>
      <!-- 数据行将动态生成 -->
    </tbody>
  </table>
`;

// 解析JSON数组
var jsonData = JSON.parse(jsonArray);

// 获取tbody元素
var tbody = document.querySelector('tbody');

// 遍历JSON数据并生成HTML内容
jsonData.forEach(function(item) {
  // 创建新的行
  var row = document.createElement('tr');
  
  // 创建单元格并设置内容
  var nameCell = document.createElement('td');
  nameCell.textContent = item.name;
  row.appendChild(nameCell);
  
  var ageCell = document.createElement('td');
  ageCell.textContent = item.age;
  row.appendChild(ageCell);
  
  var cityCell = document.createElement('td');
  cityCell.textContent = item.city;
  row.appendChild(cityCell);
  
  // 将行添加到tbody中
  tbody.appendChild(row);
});

// 将生成的HTML内容输出到页面中
document.body.innerHTML = htmlTemplate;