本文介绍如何在不覆盖原有 JSON 结构（如保留 "general" 部分）的前提下，从 HTML 表单动态提取团队数据，并将其更新至 "teams" 数组，最终生成完整 JSON 字符串——适用于需维护固定配置骨架的前端导出场景。
本文介绍如何在不覆盖原有 json 结构（如保留 `"general"` 部分）的前提下，从 html 表单动态提取团队数据，并将其更新至 `"teams"` 数组，最终生成完整 json 字符串——适用于需维护固定配置骨架的前端导出场景。
在实际开发中，常需将用户填写的表单数据导出为结构化 JSON 文件，同时保持预定义的顶层字段（如 "general"）不变。本方案不依赖后端，纯前端实现，核心思路是：加载初始 JSON 模板 → 提取表单数据 → 合并更新 "teams" 数组 → 序列化输出。
✅ 关键实现步骤
初始化 JSON 数据模板
使用 JSON.parse() 加载包含 "general" 和初始 "teams" 的模板对象，确保结构完整性。语义化表单标记
推荐使用 data-* 属性（如 data-teamid="1"）替代 ID 选择器，提升可扩展性与可读性：
-
动态提取并构造 teams 数组
通过 querySelectorAll 获取列数（减去首空列），再遍历每支队伍，按 data-* 属性精准读取值：
function saveTeamData() {
const teamCount = document.querySelectorAll('table tr:first-child td').length - 1;
const teams = [];
for (let i = 1; i <ol start="4"><li>
<strong>安全合并与导出</strong><br>
直接替换 dataObject.teams，再用 JSON.stringify() 生成标准 JSON 字符串（注意：浏览器环境无法直接写入文件，需配合 <a download> 或 Blob 触发下载）：</a>
</li></ol><pre class="brush:php;toolbar:false;">const saveBtn = document.getElementById('saveBtn');
let dataObject = JSON.parse(`{
"general": { "some": null, "other": null, "data": null },
"teams": [
{ "name": "no data", "abbr": "no data", "id": "no data" },
{ "name": "no data", "abbr": "no data", "id": "no data" }
]
}`);
saveBtn.addEventListener('click', () => {
dataObject.teams = saveTeamData();
const jsonStr = JSON.stringify(dataObject, null, 2); // 格式化缩进便于阅读
// ✅ 触发下载（推荐方式）
const blob = new Blob([jsonStr], { type: 'application/json' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'config.json';
a.click();
URL.revokeObjectURL(url);
});⚠️ 注意事项
- 数据校验建议：生产环境应增加空值/类型校验（如 id 转为数字、name 非空等），避免生成无效 JSON。
- 安全性提醒：JSON.parse() 仅用于可信模板；若需加载远程 JSON，请确保来源安全并捕获解析异常。
- 扩展性设计：如需支持 N 支队伍，只需动态生成对应 data-* 表单字段，saveTeamData() 自动适配列数。
- 文件写入限制：浏览器沙箱机制禁止直接写磁盘，必须通过 Blob + 方式触发用户下载。
该方案兼顾结构稳定性与数据灵活性，是前端配置导出的轻量级最佳实践。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
