如何通过.push()实现表单数据的追加式JSON生成？

刚好之前做过类似的需求，其实核心思路很简单：我们只需要维护一个全局的存储结构，每次点击「添加」按钮时，把当前表单的内容转换成对象，用.push()追加到数组里，再重置表单就行。下面是具体的实现细节：

1. 初始化全局存储结构 #

首先我们需要一个全局对象来保存最终的JSON结构，初始时List是一个空数组，用来存放所有表单提交的条目：

// 全局存储容器，用来保存所有表单生成的条目
const formDataStore = {
  List: []
};

2. 编写表单数据提取函数 #

我们需要一个工具函数，把表单里的各个字段值提取出来，组装成符合要求的对象（包括嵌套的someOtherList数组）：

function getCurrentFormData() {
  // 获取表单DOM（假设你的表单设置了id="form"）
  const form = document.getElementById('form');
  
  // 按需求组装数据对象，注意字段类型转换
  return {
    Id: parseInt(form.id.value),
    Name: form.name.value,
    email: form.email.value,
    message: form.message.value,
    someOtherList: [
      {
        a: parseInt(form.someOtherA.value),
        b: parseInt(form.someOtherB.value)
      }
    ],
    oppId: parseInt(form.oppId.value), // 对应示例中的opponentFighterItemDefinitionId字段
    title: form.title.value
  };
}

3. 实现「添加」按钮的核心逻辑 #

给「添加」按钮绑定点击事件，完成三个核心操作：提取当前表单数据、追加到数组、重置表单：

// 获取添加按钮DOM（假设按钮设置了id="addBtn"）
const addBtn = document.getElementById('addBtn');

addBtn.addEventListener('click', function() {
  // 1. 提取当前表单的有效数据
  const newFormItem = getCurrentFormData();
  
  // 2. 用.push()把新条目追加到List数组末尾，这一步是O(1)操作，非常高效
  formDataStore.List.push(newFormItem);
  
  // 3. 重置表单，清空所有输入字段
  document.getElementById('form').reset();
  
  // 可选：打印当前完整JSON，验证效果
  console.log(JSON.stringify(formDataStore, null, 2));
});

关键注意点 #

• .push()是数组的原生方法，会直接把元素追加到数组末尾，时间复杂度为O(1)，是最适合这种场景的高效方案。
• 注意数值型字段的类型转换，比如Id、a、b这些字段，需要用parseInt()或Number()把表单输入的字符串转换成数字，避免JSON里出现字符串类型的数值。
• 如果需要导出最终的JSON，直接使用JSON.stringify(formDataStore, null, 2)就能得到格式化后的结构。

效果验证 #

第一次填写表单点击「添加」，formDataStore.List会存入第一个条目；再次填写新内容点击「添加」，新条目会自动追加到数组末尾，最终生成的JSON结构就和你给出的示例完全一致。

内容的提问来源于stack exchange，提问作者azq