HTML(HyperText Markup Language)是一种用于创建网页的标准标记语言。JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,易于人阅读和编写,同时也易于机器解析和生成。
要在HTML页面上显示JSON数据,通常需要将JSON数据解析为JavaScript对象,然后使用JavaScript动态生成HTML内容。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Print JSON in HTML</title>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
}
</style>
</head>
<body>
<h2>JSON Data Displayed in Table</h2>
<table id="jsonTable">
<tr>
<th>Name</th>
<th>Age</th>
<th>City</th>
</tr>
</table>
<script>
// 假设这是从服务器获取的JSON数据
const jsonData = `[
{"name": "John", "age": 30, "city": "New York"},
{"name": "Anna", "age": 22, "city": "London"}
]`;
// 解析JSON数据
const data = JSON.parse(jsonData);
// 获取表格元素
const table = document.getElementById('jsonTable');
// 遍历数据并添加到表格中
data.forEach(item => {
const row = table.insertRow(-1);
const nameCell = row.insertCell(0);
const ageCell = row.insertCell(1);
const cityCell = row.insertCell(2);
nameCell.innerHTML = item.name;
ageCell.innerHTML = item.age;
cityCell.innerHTML = item.city;
});
</script>
</body>
</html>
通过以上方法,可以在HTML页面上有效地展示JSON数据。
领取专属 10元无门槛券
手把手带您无忧上云