如何在jQuery/JavaScript中正确创建带fields嵌套结构的JSON对象

你要生成的目标JSON是嵌套fields属性的结构：

{
  "fields":{
    "summary":"Test-Summary1",
    "description":"Test-Description1",
    "igniteRCA":"IGNRCA1",
    "igniteWhere":"IGNWHR1",
    "igniteWhile":"IGNWHL1",
    "igniteWhat":"IGNWHT1",
    "igniteHow":"IGNHOW1",
    "igniteBy":"IGNBY1"
  }
}

你写的分步赋值逻辑本身没有语法错误，输出结构不对只有两个常见原因：

• 代码执行顺序错了：你在给fields的各个属性赋值完成之前，就提前打印、序列化了data2，拿到的自然是空的fields对象
• DOM还没加载完成就执行了取值代码，document.getElementById()拿不到对应元素，读.value的时候直接报错，后续赋值逻辑中断，fields一直是空对象

最简洁的写法是直接按层级声明对象，不需要额外声明中间变量data4，也不需要用Object.assign做多余拷贝，从根源上避免执行顺序问题：

// 所有DOM取值和对象构造逻辑，建议放在DOM加载完成回调里执行
document.addEventListener('DOMContentLoaded', () => {
  const data2 = {
    fields: {
      summary: document.getElementById("title").value,
      description: document.getElementById("problemDescription").value,
      igniteRCA: document.getElementById("rcaClassification").value,
      igniteWhere: document.getElementById("IGNITE_Where").value,
      igniteWhile: document.getElementById("IGNITE_While").value,
      igniteWhat: document.getElementById("IGNITE_What").value,
      igniteHow: document.getElementById("IGNITE_How").value,
      igniteBy: document.getElementById("IGNITE_By").value
    }
  };
  // 这里拿到的data2结构完全符合要求，如果需要转JSON字符串发请求，用下面这行
  const requestJson = JSON.stringify(data2);
  console.log(data2, requestJson);
});

如果你习惯分步赋值的写法，严格遵守「先给子对象填完所有属性，再把子对象挂到父对象上」的顺序即可：

document.addEventListener('DOMContentLoaded', () => {
  var data2 = {};
  var fields = {};
  // 第一步：先把fields的所有属性填完
  fields.summary = document.getElementById("title").value;
  fields.description = document.getElementById("problemDescription").value;
  fields.igniteRCA = document.getElementById("rcaClassification").value;
  fields.igniteWhere = document.getElementById("IGNITE_Where").value;
  fields.igniteWhile = document.getElementById("IGNITE_While").value;
  fields.igniteWhat = document.getElementById("IGNITE_What").value;
  fields.igniteHow = document.getElementById("IGNITE_How").value;
  fields.igniteBy = document.getElementById("IGNITE_By").value;
  // 第二步：所有属性赋值完成后，再把fields挂到data2上
  data2.fields = fields;
  // 第三步：这时候再输出、序列化data2，结果就是正确的
  console.log(JSON.stringify(data2));
});

• 不要把脚本放在页面<head>里直接执行DOM取值，这时候页面元素还没渲染完成，大概率拿不到DOM节点。要么把脚本挪到</body>闭合标签之前，要么用上面的DOMContentLoaded事件包裹逻辑
• 传给后端接口的JSON格式数据，必须用JSON.stringify()把JS对象转成字符串，不要直接传原生JS对象

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