怎么把JSON显示到页面上：从基础到实践的完整指南
在Web开发中,JSON（JavaScript Object Notation）作为一种轻量级的数据交换格式，被广泛应用于前后端数据传输，将JSON数据优雅地显示在页面上，不仅需要考虑数据的可读性，还要兼顾用户体验和交互性，本文将详细介绍多种将JSON显示到页面上的方法，从简单的文本展示到复杂的可视化呈现，帮助开发者根据实际需求选择最合适的方案。
直接文本展示：最基础的方式
使用<pre>标签保留格式
JSON数据本身具有层次结构,直接显示时容易失去可读性。<pre>标签可以保留文本中的空格和换行，是展示原始JSON数据的简单有效方式。
<pre id="json-display"></pre>
<script>
const jsonData = {
name: "张三",
age: 30,
hobbies: ["阅读", "旅行", "编程"],
address: {
city: "北京",
district: "朝阳区"
}
};
document.getElementById('json-display').textContent = JSON.stringify(jsonData, null, 2);
</script>
优点：
- 实现简单,无需额外库
- 保留JSON的原始格式
- 适合调试和简单展示
缺点：
- 缺乏交互性
- 大型JSON数据可读性较差
- 无法展开/折叠节点
使用<code>标签添加语法高亮
如果希望JSON显示带有语法高亮效果,可以使用<code>标签配合CSS：
<code id="json-display" class="json-code"></code>
<style>
.json-code {
background-color: #f5f5f5;
padding: 15px;
border-radius: 5px;
font-family: monospace;
white-space: pre-wrap;
}
.json-key { color: #d73a49; }
.json-string { color: #032f62; }
.json-number { color: #005cc5; }
.json-boolean { color: #005cc5; font-weight: bold; }
.json-null { color: #005cc5; font-weight: bold; }
</style>
<script>
function highlightJson(json) {
return json
.replace(/(".*?")(?=:)/g, '<span class="json-key">$1</span>')
.replace(/: (".*?")/g, ': <span class="json-string">$1</span>')
.replace(/: (\d+)/g, ': <span class="json-number">$1</span>')
.replace(/: (true|false)/g, ': <span class="json-boolean">$1</span>')
.replace(/: (null)/g, ': <span class="json-null">$1</span>');
}
const jsonData = { /* 同上 */ };
const jsonString = JSON.stringify(jsonData, null, 2);
document.getElementById('json-display').innerHTML = highlightJson(jsonString);
</script>
交互式JSON查看器：提升用户体验
对于复杂的JSON数据,交互式查看器可以让用户通过展开/折叠节点来浏览数据结构，提高可读性。
手动实现简单的JSON树
<div id="json-tree"></div>
<script>
function createJsonTree(json, container) {
container.innerHTML = '';
function createNode(key, value, isLast) {
const node = document.createElement('div');
node.style.marginLeft = '20px';
if (typeof value === 'object' && value !== null) {
const header = document.createElement('div');
header.style.cursor = 'pointer';
header.innerHTML = `<span>${key}</span> <span style="color: #666;">[${Object.keys(value).length} items]</span>`;
const children = document.createElement('div');
children.style.display = 'none';
children.style.marginLeft = '20px';
Object.entries(value).forEach(([k, v], i, arr) => {
children.appendChild(createNode(k, v, i === arr.length - 1));
});
header.addEventListener('click', () => {
children.style.display = children.style.display === 'none' ? 'block' : 'none';
});
node.appendChild(header);
node.appendChild(children);
} else {
node.innerHTML = `<strong>${key}:</strong> ${value}`;
}
return node;
}
Object.entries(json).forEach(([key, value], i, arr) => {
container.appendChild(createNode(key, value, i === arr.length - 1));
});
}
const jsonData = { /* 同上 */ };
createJsonTree(jsonData, document.getElementById('json-tree'));
</script>
使用成熟的JSON查看器库
市面上有许多优秀的JSON查看器库,可以快速实现功能丰富的JSON展示：
(1) JSONView
<!DOCTYPE html>
<html>
<head>JSONView示例</title>
<script src="https://cdn.jsdelivr.net/npm/jsonview@1.0.0/jsonview.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jsonview@1.0.0/jsonview.css">
</head>
<body>
<div id="json-container"></div>
<script>
const jsonData = { /* 同上 */ };
const container = document.getElementById('json-container');
jsonview.render(container, jsonData);
jsonview.expand(container);
</script>
</body>
</html>
(2) react-json-view
<!DOCTYPE html>
<html>
<head>react-json-view示例</title>
<script src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/react-json-view@1.21.3/dist/react-json-view.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/react-json-view@1.21.3/dist/react-json-view.css">
</head>
<body>
<div id="root"></div>
<script>
const jsonData = { /* 同上 */ };
ReactDOM.render(React.createElement(JSONView, { src: jsonData }), document.getElementById('root'));
</script>
</body>
</html>
表格形式展示：结构化数据的好选择
当JSON数据是数组形式且结构相对简单时,表格是最直观的展示方式。
<table id="json-table" border="1" style="border-collapse: collapse; width: 100%;">
<thead>
<tr id="table-header"></tr>
</thead>
<tbody id="table-body"></tbody>
</table>
<script>
const jsonArray = [
{ name: "张三", age: 30, city: "北京" },
{ name: "李四", age: 25, city: "上海" },
{ name: "王五", age: 35, city: "广州" }
];
// 创建表头
const headers = Object.keys(jsonArray[0]);
const headerRow = document.getElementById('table-header');
headers.forEach(header => {
const th = document.createElement('th');
th.textContent = header;
headerRow.appendChild(th);
});
// 填充表格数据
const tableBody = document.getElementById('table-body');
jsonArray.forEach(item => {
const row = document.createElement('tr');
headers.forEach(header => {
const td = document.createElement('td');
td.textContent = item[header];
row.appendChild(td);
});
tableBody.appendChild(row);
});
</script>
图表可视化：让数据更直观
对于包含数值型数据的JSON,使用图表进行可视化可以更直观地展示数据关系。
使用Chart.js展示数据
<!DOCTYPE html>
<html>
<head>JSON数据图表化</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
<canvas id="myChart" width="400" height="200"></canvas>
<script>
const jsonData = {
labels: ["一月", "二月", "三月", "四月", "五月"],
datasets: [{
label: "销售额",
data: [12000, 19000, 15000, 25000, 22000],
backgroundColor: "rgba(54, 162, 235, 0.2)",
borderColor: "rgba(54, 162, 235, 1)",
borderWidth: 1
}]
};
const ctx = document.getElementById('myChart').getContext('2d');
new Chart(ctx, {
type: 'bar',
data: jsonData,
options: {
scales: {
y: {
beginAtZero: true
}
}
}
});
</script>
</body>
</html>
使用D3.js创建复杂可视化
<!DOCTYPE html> <html
还没有评论，来说两句吧...