如何使用JavaScript将动态生成字段转换为JSON对象数组

实现方案 #

1. 添加触发按钮 #

在你的HTML中新增用于点击触发的按钮：

<button id="generateJsonBtn">生成JSON数组</button>

2. 编写核心逻辑 #

直接用原生JS实现，无需依赖第三方库：

// 绑定按钮点击事件
document.getElementById('generateJsonBtn').addEventListener('click', function() {
  const result = []
  // 获取所有服务卡片节点
  const sertileList = document.querySelectorAll('.sertile')

  sertileList.forEach(item => {
    // 逐个读取当前卡片的字段值，自动转换数字类型
    const serviceItem = {
      parType: item.querySelector('.parType').value,
      id: Number(item.querySelector('.id').value),
      serviceName: item.querySelector('.serviceName').value,
      mrp: Number(item.querySelector('.mrp').value),
      dis: Number(item.querySelector('.dis').value),
      dur: Number(item.querySelector('.dur').value)
    }
    result.push(serviceItem)
  })

  // result就是你需要的数组结构
  console.log('生成的数组：', result)
  // 如果需要JSON字符串格式，调用下方方法即可
  console.log('JSON字符串：', JSON.stringify(result, null, 2))
})

补充说明 #

• 代码会自动遍历所有.sertile节点，后续动态新增的节点也可以正常读取
• 已经自动将数字类字段转为Number类型，完全匹配你给出的输出结构要求
• 拿到result数组后可直接用于后续业务逻辑，比如提交后端、本地存储等。

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