本文详解如何在 JavaScript 中正确解析 JSON 数据（数组或对象），并为每条文本内容动态生成带复选框的 HTML 结构，避免直接拼接 jQuery 对象导致的 [object Object] 错误。
本文详解如何在 javascript 中正确解析 json 数据（数组或对象），并为每条文本内容动态生成带复选框的 html 结构，避免直接拼接 jquery 对象导致的 `[object object]` 错误。
在前端开发中，常见需求是将后端返回的条款文本列表（如用户协议、隐私政策条目）渲染为带复选框的可交互 HTML 列表。但初学者常因混淆数据结构与 DOM 操作方式而踩坑——例如直接将 $('#checkBoxConsent')（一个 jQuery 对象）拼入字符串，结果输出 [object Object]，而非预期的 HTML 元素。
首先需明确：JSON 格式必须严格符合规范。若你的数据形如 [0: "条款一", 1: "条款二"]，这并非合法 JSON；合法数组应为 ["条款一", "条款二"]，合法对象应为 {"key1": "条款一", "key2": "条款二"}。可通过 JSON.stringify() 验证原始数据结构：
// ✅ 正确：数组转 JSON 字符串
console.log(JSON.stringify(["条款一", "条款二"]));
// 输出: '["条款一","条款二"]'
// ✅ 正确：对象转 JSON 字符串
console.log(JSON.stringify({clause1: "条款一", clause2: "条款二"}));
// 输出: '{"clause1":"条款一","clause2":"条款二"}'
若数据以 JSON 字符串形式传入（如 API 响应），必须先用 JSON.parse() 解析为原生 JavaScript 数据结构，再进行遍历：
// 假设 data.consentText.consentLines 是合法 JSON 字符串
let consentLines;
try {
consentLines = JSON.parse(data.consentText.consentLines);
} catch (e) {
console.error("JSON 解析失败，请检查数据格式", e);
consentLines = [];
}
接下来，根据数据类型选择遍历方式并生成带复选框的 HTML：
-
若为数组（推荐用于有序条款列表）：
let consentString = ""; if (Array.isArray(consentLines)) { consentLines.forEach((text, index) => { // 使用唯一 name 和 value 提升可访问性与表单处理能力 consentString += ` <label> <input type="checkbox" name="consent" value="${index}"> ${text} </label><br> `; }); } $('#stateConsentLines').html(consentString); -
若为对象（适用于键值映射场景）：
let consentString = ""; if (typeof consentLines === 'object' && consentLines !== null && !Array.isArray(consentLines)) { for (const key in consentLines) { if (consentLines.hasOwnProperty(key)) { consentString += ` <label> <input type="checkbox" name="consent" value="${key}"> ${consentLines[key]} </label><br> `; } } } $('#stateConsentLines').html(consentString);
✅ 关键注意事项：
- 避免直接拼接 jQuery 对象（如 $('#checkBoxConsent')），它不是字符串，而是 DOM 封装对象；应使用原生 HTML 字符串或 document.createElement() 动态创建；
- 使用
- 为每个 设置 name 和有意义的 value（如索引或键名），便于后续通过 $('input[name="consent"]:checked') 统一获取选中项；
- 始终校验数据类型（Array.isArray() / typeof）并加入异常处理，防止运行时错误中断渲染。
最终，这段代码将可靠地将条款列表渲染为语义清晰、可交互、易维护的复选框组，既符合现代 Web 开发最佳实践，也具备良好的健壮性与可扩展性。
