Vanilla JavaScript 将表单数据转换为具有相应名称和值的对象

Question

我正在尝试使用 vanilla JavaScript 获取表单数据。目前我现在拥有的看起来像这样

submit(){

  var formData = new FormData(document.querySelector('form'))

  let JSON = JSON.parse(JSON.stringify(Object.fromEntries(new FormData(document.querySelector('form')).entries())));

  console.log(json);

}

输出是一个 JSON，这是我想要的，看起来像这样

5f5cf7c0123c4224fcfb193a[fee]: "0.966"

5f5cf7c0123c4224fcfb193a[max_price]: "400"

5f5cf7c0123c4224fcfb193b[fee]: "0.971"

5f5cf7c0123c4224fcfb193b[max_price]: "600"

5f5cf7c0123c4224fcfb193c[fee]: "0.976"

5f5cf7c0123c4224fcfb193c[max_price]: "800"

5f5cf7c0123c4224fcfb193d[standard]: "0.981"

5f5cf7c0123c4224fcfb193e[fee]: "1.044"

5f5cf7c0123c4224fcfb193e[max_price]: "100"

5f5cf7c0123c4224fcfb193f[fee]: "1.039"

5f5cf7c0123c4224fcfb193f[max_price]: "200"

5f5cf7c0123c4224fcfb1938[fee]: "0.956"

5f5cf7c0123c4224fcfb1938[max_price]: "100"

5f5cf7c0123c4224fcfb1939[fee]: "0.961"

5f5cf7c0123c4224fcfb1939[max_price]: "200"

5f5cf7c0123c4224fcfb1940[fee]: "1.034"

但问题是我希望数据看起来像这样

5f5cf7c0123c4224fcfb193a: {

  fee: "0.966",

  max_price: "400"

}

就像在 PHP 中发送请求并获取字段一样。有什么办法可以做到这一点？我正在考虑寻找并构建一些自定义功能的开始[，但我认为这太粗略了。

更新 HTML 表单

             <input

              class="border border-gray-300 duration-300 focus:outline-none focus:border-blue focus:duration-300"

              name="5f5cf7c0123c4224fcfb193a[max_price]"

              type="number"

              value="400"

              step="any"

            />

 

            <input

              class="border border-gray-300 duration-300 focus:outline-none focus:border-blue focus:duration-300"

              name="5f5cf7c0123c4224fcfb193a[fee]"

              type="number"

              value="0.966"

              step="any"

            />

             <input

              class="border border-gray-300 duration-300 focus:outline-none focus:border-blue focus:duration-300"

              name="5f5cf7c0123c4224fcfb193b[max_price]"

              type="number"

              value="400"

              step="any"

            />

Answer 1

没有内置的东西可以做到这一点。数组上的一个简单的 reduce 循环可以将其映射到您想要的格式。var formData = new FormData(document.querySelector('form'))var entries = formData.entries();var data = Object.fromEntries(entries);var result = Object.entries(data).reduce(function(result, entry) {&nbsp; const keys = entry[0].match(/([^[]+)\[([^\]]+)/)&nbsp; result[keys[1]] = result[keys[1]] || {};&nbsp; result[keys[1]][keys[2]] = entry[1];&nbsp; return result}, {});console.log(result);<form>&nbsp; <input name="a[foo]" value="a-foo-1" />&nbsp; <input name="a[bar]" value="a-bar-1" />&nbsp; <input name="b[foo]" value="b-foo-1" />&nbsp; <input name="b[bar]" value="b-bar-1" />&nbsp; <input name="c[foo]" value="c-foo-1" />&nbsp; <input name="c[bar]" value="c-bar-1" /></form>