如何通过html显示json数据

想要在网页上展示JSON数据，我们可以使用HTML和JavaScript来实现，JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，易于人阅读和编写，同时也易于机器解析和生成，本文将详细介绍如何在HTML页面中显示JSON数据，主要包括以下几种方法：使用JavaScript直接解析并显示JSON数据、利用jQuery插件显示JSON数据以及使用第三方库展示JSON数据。

准备工作

我们需要创建一个HTML文件，并在其中引入JSON数据，这里以一个简单的JSON为例：

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

我们将这个JSON数据保存在一个名为data.json的文件中。

二、使用JavaScript解析并显示JSON数据

1、创建HTML结构

在HTML文件中，我们可以创建一个简单的结构来显示JSON数据。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Display JSON Data</title>
</head>
<body>
    <div id="json-data">
        <!-- JSON数据将在这里显示 -->
    </div>
    <script src="script.js"></script>
</body>
</html>

2、编写JavaScript代码

我们需要编写JavaScript代码来读取JSON文件，并将其内容显示在HTML页面上。

document.addEventListener('DOMContentLoaded', function() {
    fetch('data.json')
        .then(response => response.json())
        .then(data => {
            const jsonDataDiv = document.getElementById('json-data');
            let htmlContent = '<ul>';
            for (const key in data) {
                if (data.hasOwnProperty(key)) {
                    htmlContent +=<li><strong>${key}:</strong> ${data[key]}</li>;
                }
            }
            htmlContent += '</ul>';
            jsonDataDiv.innerHTML = htmlContent;
        })
        .catch(error => console.error('Error:', error));
});

这段代码中，我们使用了fetch API来异步获取JSON文件，并将其解析为JavaScript对象，我们遍历这个对象，将其内容添加到HTML列表中。

利用jQuery插件显示JSON数据

如果你喜欢使用jQuery，也可以通过以下方式来显示JSON数据。

1、引入jQuery库

需要在HTML文件中引入jQuery库。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

2、编写jQuery代码

编写jQuery代码来读取JSON文件并显示数据。

$(document).ready(function() {
    $.getJSON('data.json', function(data) {
        const jsonDataDiv = $('#json-data');
        let htmlContent = '<ul>';
        $.each(data, function(key, value) {
            htmlContent +=<li><strong>${key}:</strong> ${value}</li>;
        });
        htmlContent += '</ul>';
        jsonDataDiv.html(htmlContent);
    });
});