展示 JSON 数据并格式化，通常有以下两种方法：
方法一：通过 JavaScript 进行格式化
通过 JavaScript 获取到 JSON 数据之后，可以使用 JSON 的 stringify 方法进行格式化，再将格式化后的结果插入到 HTML 页面中即可。
示例代码：
<!DOCTYPE html>
<html>
<head>
<title>展示JSON数据并格式化的方法-示例1</title>
</head>
<body>
<pre id="json"></pre>
<script>
const data = {
"name": "张三",
"age": 18,
"hobby": ["游戏", "编程", "阅读"],
"address": {
"province": "上海市",
"city": "上海市",
"district": "徐汇区"
}
};
const formattedData = JSON.stringify(data, null, 4);
document.getElementById("json").innerHTML = formattedData;
</script>
</body>
</html>
在上面的示例中，我们定义了一个简单的 JSON 数据，包含了一些基本的数据类型和复杂类型，包括了数组和对象。然后使用 JSON.stringify() 方法将其格式化，并将格式化后的结果插入到 HTML 页面中的 <pre> 元素中。
传给 JSON.stringify() 的第一个参数是需要格式化的 JSON 数据。第二个参数是替换器，可以用来控制如何过滤和转换结果。第三个参数是缩进空格数量，用来控制输出格式的缩进。
在上面的示例中，我们将缩进空格数量设为 4。
方法二：使用第三方库
除了用 JavaScript 格式化之外，还可以使用第三方库来展示格式化后的 JSON 数据。这些库通常提供了更多的展示选项，比如选择颜色主题、折叠展开等功能。
下面是几个常用的第三方库：
1. jQuery 插件 - jQuery JSONView
jQuery JSONView 是一个很受欢迎的 jQuery 插件，用于展示 JSON 数据并格式化。它支持展示基本类型、数组和嵌套对象等各种数据类型。
示例代码：
<!DOCTYPE html>
<html>
<head>
<title>展示JSON数据并格式化的方法-示例2</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-jsonview/1.2.3/jquery.jsonview.min.css" />
</head>
<body>
<pre id="json"></pre>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-jsonview/1.2.3/jquery.jsonview.min.js"></script>
<script>
const data = {
"name": "张三",
"age": 18,
"hobby": ["游戏", "编程", "阅读"],
"address": {
"province": "上海市",
"city": "上海市",
"district": "徐汇区"
}
};
$('#json').JSONView(data);
</script>
</body>
</html>
在上面的示例中，我们引入了 jQuery、jQuery JSONView 的 CSS 和 JavaScript 文件。然后在 <pre> 元素上调用了 JSONView() 方法来展示格式化后的 JSON 数据。
2. Vue 插件 - vue-json-pretty
vue-json-pretty 是一个 Vue 的插件，它提供了一个漂亮的 UI 来展示 JSON 数据，支持标签折叠和样式修改。
示例代码：
<!DOCTYPE html>
<html>
<head>
<title>展示JSON数据并格式化的方法-示例3</title>
<link rel="stylesheet" href="https://unpkg.com/vue-json-pretty/lib/styles.css">
</head>
<body>
<div id="app">
<json-pretty :data="json"></json-pretty>
</div>
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vue-json-pretty/lib/main.js"></script>
<script>
new Vue({
el: '#app',
data: {
json: {
"name": "张三",
"age": 18,
"hobby": ["游戏", "编程", "阅读"],
"address": {
"province": "上海市",
"city": "上海市",
"district": "徐汇区"
}
}
},
});
</script>
</body>
</html>
在上面的示例中，我们引入了 Vue、vue-json-pretty 的 CSS 和 JavaScript 文件。然后在 Vue 中定义了一个 JSON 数据对象，并将其传递给 json-pretty 组件进行展示。
以上就是展示 JSON 数据并格式化的两种方法和两个示例，你可以根据需求选择其中一种方法来实现 JSON 数据的展示和格式化。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：html页面展示json数据并格式化的方法 - Python技术站
微信扫一扫 
支付宝扫一扫 