使用模板字面量创建对象报ts1136错误如何生成嵌套JSON结构

问题原因 #

1. 语法错误：你使用模板字符串直接拼接键值对塞入对象字面量的写法不符合JS语法规范，因此抛出Property assignment expected.ts(1136)错误。动态键需要使用计算属性名语法（即用方括号包裹动态键名）实现。
2. 逻辑错误：你原代码的遍历逻辑是直接往根对象添加属性，因此就算去掉报错也只能得到扁平化的JSON结构，需要将FormData的键值对写入嵌套的子对象中。

修复后的完整代码 #

function toJSONstring(form) {
  // 用计算属性定义动态外层键，值初始化为空的嵌套对象
  let object = { [form.name]: {} };
  // 提取嵌套对象的引用，后续表单字段都写入该对象
  const nestedData = object[form.name];

  let formData = new FormData(form);
  formData.forEach((value, key) => {
    if (!Reflect.has(nestedData, key)) {
      nestedData[key] = value;
      return;
    }
    if (!Array.isArray(nestedData[key])) {
      nestedData[key] = [nestedData[key]];
    }
    nestedData[key].push(value);
  });

  form.reset();
  // 末尾两个参数用于格式化输出JSON，不需要可以删掉
  return JSON.stringify(object, null, 2);
}

效果说明 #

只要你的表单<form>标签的name属性设置为network_settings，调用该函数就会返回你需要的嵌套结构JSON字符串。

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