js实现将json数组显示前台table中

非常好的问题。下面是“js实现将json数组显示前台table中”的完整攻略，包括两条示例说明。

使用JS将JSON数组显示在前台的Table中

步骤一：获取JSON数据

在此示例中，我们将使用一个包含JSON数据的外部文本文件，文件名为"data.json"。该JSON文件以数组形式存储数据，并具有以下数据字段：Name、Age、Gender。

为了将其读入我们的JavaScript代码中，我们可以使用XMLHttpRequest对象。以下代码展示了如何使用XMLHttpRequest对象读取data.json文件：

var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    var myObj = JSON.parse(this.responseText);
    //ToDo: Display myObj data on table
  }
};
xhttp.open("GET", "data.json", true);
xhttp.send();

步骤二：创建HTML Table及其表头字段

接下来，我们需要创建一个包含表头的HTML表格。这可以通过在HTML中使用<table>和<thead>标签来轻松完成。

以下是一个基本的HTML表格代码示例，其中包含一个表头行：

<table id="myTable">
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>Gender</th>
    </tr>
  </thead>
  <tbody>

  </tbody>
</table>

步骤三：循环JSON数组并创建HTML表行

接下来，我们需要通过JavaScript循环遍历JSON数组，并在每个循环迭代中创建一个新的HTML表行。为了实现这一点，我们可以使用以下代码：

var table = document.getElementById("myTable");
for (var i = 0; i < myObj.length; i++) {
  var row = table.insertRow(i+1);
  var nameCell = row.insertCell(0);
  nameCell.innerHTML = myObj[i].Name;
  var ageCell = row.insertCell(1);
  ageCell.innerHTML = myObj[i].Age;
  var genderCell = row.insertCell(2);
  genderCell.innerHTML = myObj[i].Gender;
}

在上面的代码中，我们通过使用insertRow方法在表格中的指定位置插入了一个新的HTML表行，再使用insertCell方法往行对象中插入单元格，最终使用.innerHTML方法向每个单元格中写入数据。

示例一 - 显示从JSON文件中读取到的数据

假设我们拥有如下JSON数据，存储于"data.json"文件中：

[
  {
    "Name": "John Smith",
    "Age": 25,
    "Gender": "Male"
  },
  {
    "Name": "Jane Doe",
    "Age": 30,
    "Gender": "Female"
  },
  {
    "Name": "Bob Johnson",
    "Age": 45,
    "Gender": "Male"
  }
]

使用上述步骤，我们可以将数据读取到我们的JavaScript代码中，并使用以下方式输出到HTML table中：

<table id="myTable">
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>Gender</th>
    </tr>
  </thead>
  <tbody>

  </tbody>
</table>

<script>
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    var myObj = JSON.parse(this.responseText);
    var table = document.getElementById("myTable");
    for (var i = 0; i < myObj.length; i++) {
      var row = table.insertRow(i+1);
      var nameCell = row.insertCell(0);
      nameCell.innerHTML = myObj[i].Name;
      var ageCell = row.insertCell(1);
      ageCell.innerHTML = myObj[i].Age;
      var genderCell = row.insertCell(2);
      genderCell.innerHTML = myObj[i].Gender;
    }
  }
};
xhttp.open("GET", "data.json", true);
xhttp.send();
</script>

示例二 - 显示从JavaScript中读取JSON数据

假设我们拥有如下JSON数据，已被存储在JavaScript变量myObj中：

var myObj = [
  {
    "Name": "John Smith",
    "Age": 25,
    "Gender": "Male"
  },
  {
    "Name": "Jane Doe",
    "Age": 30,
    "Gender": "Female"
  },
  {
    "Name": "Bob Johnson",
    "Age": 45,
    "Gender": "Male"
  }
];

使用上述步骤，我们可以将数据输出到HTML table中：

<table id="myTable">
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>Gender</th>
    </tr>
  </thead>
  <tbody>

  </tbody>
</table>

<script>
var myObj = [
  {
    "Name": "John Smith",
    "Age": 25,
    "Gender": "Male"
  },
  {
    "Name": "Jane Doe",
    "Age": 30,
    "Gender": "Female"
  },
  {
    "Name": "Bob Johnson",
    "Age": 45,
    "Gender": "Male"
  }
];

var table = document.getElementById("myTable");
for (var i = 0; i < myObj.length; i++) {
  var row = table.insertRow(i+1);
  var nameCell = row.insertCell(0);
  nameCell.innerHTML = myObj[i].Name;
  var ageCell = row.insertCell(1);
  ageCell.innerHTML = myObj[i].Age;
  var genderCell = row.insertCell(2);
  genderCell.innerHTML = myObj[i].Gender;
}
</script>

这就是如何在HTML table中显示JSON数组的完整攻略！