疑问式标题：如何在HTML页面显示JSON数据？解决方案式标题：HTML页面中展示JSON数据的三种方法_SEO优化

如何在HTML页面上显示JSON数据

引入JSON数据

首先，我们需要获取JSON数据，可以从服务器获取或者读取本地文件，这里我们假定已经获取到了一个名为data.json的JSON文件，其内容如下：

{
  "name": "张三",
  "age": 30,
  "hobbies": ["篮球", "足球", "游泳"]
}

创建HTML结构

接下来，我们需要创建一个HTML页面，用于显示JSON数据，我们将使用<pre>标签来展示JSON数据，这个标签可以保留文本的格式，同时需要引入一个外部的JavaScript文件来处理JSON数据，HTML页面的结构如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF8">
  <meta name="viewport" content="width=devicewidth, initialscale=1.0">
  <title>显示JSON数据</title>
</head>
<body>
  <h1>个人信息</h1>
  <pre id="jsonData"></pre>
  <script src="main.js"></script>
</body>
</html>

编写JavaScript代码

现在，我们需要编写JavaScript文件（例如main.js），用于读取JSON文件并将其内容显示在HTML页面上。可以使用fetch API来获取JSON文件，然后使用JSON.parse()方法将其解析为JavaScript对象，使用innerText属性将对象的内容显示在<pre>标签中。

document.addEventListener('DOMContentLoaded', function () {
  fetch('data.json')
    .then(response => response.text())
    .then(data => {
      const jsonObj = JSON.parse(data);
      document.getElementById('jsonData').innerText = JSON.stringify(jsonObj, null, 2);
    })
    .catch(error => {
      console.error('加载JSON文件时出错：', error);
    });
});