我如何将条目从HTML5 FormData对象转换为JSON?
解决方案不应该使用jQuery。而且，它不应该简单地序列化整个FormData对象，而应该只序列化它的键/值条目。
当前回答
这里有一种更函数化的方式，不需要使用库。
Array.from(formData.entries()).reduce((memo, [key, value]) => ({
...memo,
[key]: value,
}), {});
例子:
. getelementbyid(“foobar”)。addEventListener('submit'， (e) => { e.preventDefault (); const formData = new formData (e.target); const data = Array.from(formData.entries()).reduce((memo， [key, value]) => ({ 备忘录, (例子):值, }, {}); . getelementbyid(“输出”)。innerHTML = JSON.stringify(数据); })； <形式id =“foobar”> <input name='baz' /> <input type='submit' /> > < /形式 <pre id='output'>输入一些值并提交</pre>
其他回答
对于我的目的，包括多选，如复选框，这是很好的:
JSON.stringify(Array.from((new FormData(document.querySelector('form'))).entries()).reduce((map = {}, [key, value]) => {
return {
...map,
[key]: map[key] ? [...map[key], value] : value,
};
}, {}));
我在这里迟到了。但是，我做了一个简单的方法来检查输入type="checkbox"
var formData = new FormData($form.get(0));
var objectData = {};
formData.forEach(function (value, key) {
var updatedValue = value;
if ($('input[name="' + key + '"]').attr("type") === "checkbox" && $('input[name="' + key + '"]').is(":checked")) {
updatedValue = true; // we don't set false due to it is by default on HTML
}
objectData[key] = updatedValue;
});
var jsonData = JSON.stringify(objectData);
我希望这能帮助到其他人。
这解决了我的问题，这是一个对象
const formDataObject = (formData) => {
for (const key in formData) {
if (formData[key].startsWith('{') || formData[key].startsWith('[')) {
try {
formData[key] = JSON.parse(formData[key]);
console.log("key is :", key, "form data is :", formData[key]);
} catch (error) {
console.log("error :", key);
}
}
}
console.log("object", formData)
}
多年后的香草ajs (es6)
let body = new FormData()
body.set('key1', 'value AA')
body.set('key2', 'value BB')
let data = [...body.keys()].reduce( (acc, key, idx) => {
acc[key] = body.get(key)
return acc
} , {} )
console.log(JSON.stringify(data)) // {key1: 'value AA', key2: 'value BB'}
如果您正在使用lodash，可以使用fropairs简单地完成
import {fromPairs} from 'lodash';
const object = fromPairs(Array.from(formData.entries()));
