JSON在HTML中的遍历：从数据到动态内容的桥梁**
在现代Web开发中,JSON（JavaScript Object Notation）因其轻量级、易读易写的特性，成为了前后端数据交换的主流格式，当我们从服务器获取JSON数据，或是在前端定义了JSON格式的配置信息后，常常需要将这些数据展示在HTML页面上，或者根据数据动态生成HTML内容，这就涉及到了在HTML中遍历JSON数据的核心问题，本文将详细介绍几种在HTML中遍历JSON数据的主要方法，帮助开发者灵活应对各种场景。
JSON数据简介
在开始遍历之前,我们先简单回顾一下JSON的基本结构，JSON数据可以是对象（用 表示，键值对集合）或数组（用 [] 表示，有序值列表）。
// 一个JSON对象
{
"name": "张三",
"age": 30,
"city": "北京",
"hobbies": ["阅读", "旅行", "编程"]
}
// 一个JSON数组
[
{"id": 1, "product": "手机", "price": 4999},
{"id": 2, "product": "电脑", "price": 8999},
{"id": 3, "product": "平板", "price": 2999}
]
在HTML中,我们通常通过JavaScript来处理这些JSON数据。
在HTML中遍历JSON数据的主要方法
使用JavaScript的 for...in 循环（适用于JSON对象）
for...in 循环用于遍历对象的可枚举属性，当我们需要遍历JSON对象的键值对时，这是一个简单直接的方法。
示例：
假设我们有如下JSON对象数据,并希望将其基本信息展示在一个HTML列表中。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">for...in 遍历JSON对象</title>
</head>
<body>
<h2>个人信息</h2>
<ul id="personInfo"></ul>
<script>
const personData = {
"name": "张三",
"age": 30,
"city": "北京",
"hobbies": ["阅读", "旅行", "编程"]
};
const personInfoList = document.getElementById('personInfo');
for (let key in personData) {
// 遍历数组时，通常不直接将数组作为值显示，而是需要特殊处理
if (Array.isArray(personData[key])) {
const listItem = document.createElement('li');
listItem.textContent = `${key}: ${personData[key].join(', ')}`;
personInfoList.appendChild(listItem);
} else {
const listItem = document.createElement('li');
listItem.textContent = `${key}: ${personData[key]}`;
personInfoList.appendChild(listItem);
}
}
</script>
</body>
</html>
说明：
for (let key in personData)会遍历personData对象的所有可枚举属性（键），并将键名赋值给key。- 对于每个键,我们可以通过
personData[key]来访问对应的值。 Array.isArray()用于判断值是否为数组，以便进行不同的处理。- 我们通过
document.createElement和appendChild动态创建HTML元素并添加到页面中。
使用JavaScript的 for...of 循环与 Object.entries()（推荐，适用于JSON对象）
for...of 循环可以遍历可迭代对象（如数组、Map、Set等），对于JSON对象，我们可以先使用 Object.entries() 将其转换为键值对数组，然后再用 for...of 遍历，这种方法比 for...in 更直观，且不会遍历原型链上的属性。
示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">for...of + Object.entries 遍历JSON对象</title>
</head>
<body>
<h2>个人信息 (for...of方式)</h2>
<ul id="personInfoOf"></ul>
<script>
const personData = {
"name": "张三",
"age": 30,
"city": "北京",
"hobbies": ["阅读", "旅行", "编程"]
};
const personInfoOfList = document.getElementById('personInfoOf');
for (const [key, value] of Object.entries(personData)) {
const listItem = document.createElement('li');
if (Array.isArray(value)) {
listItem.textContent = `${key}: ${value.join(', ')}`;
} else {
listItem.textContent = `${key}: ${value}`;
}
personInfoOfList.appendChild(listItem);
}
</script>
</body>
</html>
说明：
Object.entries(personData)返回一个二维数组，每个子数组是[key, value]的形式。for (const [key, value] of ...)可以直接解构出键和值，代码更简洁。
使用数组的 forEach() 方法（适用于JSON数组）
当我们处理的是JSON数组时,forEach() 方法是一个非常方便的选择，它对数组的每个元素执行一次提供的函数。
示例：
假设我们有一个产品JSON数组,希望将其展示在一个HTML表格中。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">forEach 遍历JSON数组</title>
<style>
table { border-collapse: collapse; width: 50%; }
th, td { border: 1px solid #ddd; padding: 8px; text-align: left; }
th { background-color: #f2f2f2; }
</style>
</head>
<body>
<h2>产品列表</h2>
<table id="productTable">
<thead>
<tr>
<th>ID</th>
<th>产品</th>
<th>价格</th>
</tr>
</thead>
<tbody id="productTableBody">
</tbody>
</table>
<script>
const productsData = [
{"id": 1, "product": "手机", "price": 4999},
{"id": 2, "product": "电脑", "price": 8999},
{"id": 3, "product": "平板", "price": 2999}
];
const tableBody = document.getElementById('productTableBody');
productsData.forEach(product => {
const row = document.createElement('tr');
// 为每个属性创建单元格
const idCell = document.createElement('td');
idCell.textContent = product.id;
row.appendChild(idCell);
const nameCell = document.createElement('td');
nameCell.textContent = product.product;
row.appendChild(nameCell);
const priceCell = document.createElement('td');
priceCell.textContent = product.price;
row.appendChild(priceCell);
tableBody.appendChild(row);
});
</script>
</body>
</html>
说明：
productsData.forEach(product => { ... })会遍历productsData数组中的每一个元素（每个产品对象），并将其赋值给product参数。- 在回调函数内部,我们可以像访问普通对象一样访问
product的属性。
使用数组的 map() 方法（适用于JSON数组，常与模板字符串结合）
map() 方法创建一个新数组，其结果是该数组中的每个元素都调用一个提供的函数后返回的结果，在HTML遍历中，它通常与模板字符串结合，生成HTML字符串片段，然后一次性插入到DOM中，性能上可能优于多次DOM操作。
示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">map 遍历JSON数组</title>
<style>
.product-card { border: 1px solid #ccc; border-radius: 5px; padding: 10px; margin: 10px; width: 200px; display: inline-block; }
.product-card h3 { margin-top: 0; }
</style>
</head>
<body>
<h2>产品列表 (map方式)</h2>
<div id="productCards"></div>
<script>
const productsData = [
{"id": 1, "product": "手机", "price": 4999},
{"id": 2, "product": "电脑", "price": 8999},
{"id": 3, "product": "平板", "price": 2999}
];
const productCardsContainer = document.getElementById('productCards');
const cardsHTML = productsData.map(product => `
<div class="product-card">
<h3>${product.product}</h3>
<p>ID: ${product
还没有评论，来说两句吧...