如何从动态生成的HTML表格生成指定嵌套结构JSON？

我帮你调整了代码，现在可以完美生成你需要的JSON结构了。先看修改后的完整代码，再给你拆解关键改动点：

修改后的JavaScript代码 #

$('#createJSON').click(function(event) {
  // 初始化符合要求的外层对象
  let result = {
    id: "", // 若需填充此ID，可改为从表格获取，比如 $('#source-table tbody tr:first input[name="id"]').val()
    name: "Source",
    properties: []
  };

  $('#main-div .component-base').each(function() {
    if ($(this).data('component-type') === 'source') {
      $(this).find('tbody tr').each(function(i) {
        const tb = $(this);
        const obj = {};
        // 精准获取每个需要的字段
        obj.type = tb.find('input[name="type"]').val();
        obj.name1 = tb.find('input[name="name1"]').val();
        obj.location = tb.find('input[name="location"]').val();
        obj.schema = tb.find('input[name="schema"]').val();
        obj.row = i;
        // 将行数据加入properties数组
        result.properties.push(obj);
      });
    }
  });

  // 格式化输出JSON（第二个参数为null，第三个参数2是缩进空格，方便阅读）
  document.getElementById('output').innerHTML = JSON.stringify(result, null, 2);
  event.preventDefault();
});

关键改动说明 #

• 重构数据结构：不再用数组存储所有行数据，而是创建了你需要的外层对象，直接定义name为"Source"，properties作为存储行数据的数组，完全匹配目标结构
• 精准字段收集：原来的代码遍历所有非checkbox输入，可能会收集到隐藏的name输入（value为source），现在改为直接获取需要的type/name1/location/schema字段，避免冗余数据
• 修复事件参数问题：给click事件添加了event参数，确保event.preventDefault()能正常工作，不会报错
• 格式化输出：用JSON.stringify(result, null, 2)生成带缩进的JSON，比压缩格式更易读

测试效果 #

当你在表格中输入数据后点击按钮，输出的JSON会完全符合你给出的结构。例如：

{
  "id": "",
  "name": "Source",
  "properties": [
    {
      "type": "Database",
      "name1": "PostgreSQL",
      "location": "192.168.1.100",
      "schema": "public",
      "row": 0
    },
    {
      "type": "File",
      "name1": "CSV_Export",
      "location": "/data/exports",
      "schema": "csv",
      "row": 1
    }
  ]
}

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