How do I compare FormData object, I am trying to check if the form has been changed or not before sending the ajax request.
But it seems objects cannot be compared. Is there any way to convert it to js Object or an elegant way?
let a = new FormData()
let b = new FormData()
console.log(a === b ) // returns false
I would try this
const a = new FormData();
a.append("username", "Alexander");
a.append("accountnum", 123);
const b = new FormData();
b.append("username", "Alexander");
b.append("accountnum", 123);
let different = false
for (let [key, value] of b.entries()) {
if (a.get(key) !== value) different = true
}
Or you could try iterating over both objects at the and comparing them, that might be more performant.
JSON.stringify([...a.entries()]) === JSON.stringify([...b.entries()])
b has an entry that isn't in a (although that would only be an issue if the form was being dynamically modified)
You can use formData.entries().
let a = new FormData()
let b = new FormData()
let arr1 = [];
let arr2 = [];
for(let pair of a.entries()) {
const key = pair[0];
arr1.push({[key]: pair[1]})
}
for(let pair of b.entries()) {
const key = pair[0];
arr2.push({[key]: pair[1]})
}
And then you can just compare two arrays of objects.
I ended up with this.
export default function formDataEqual(one, two) {
return new URLSearchParams(one).toString() === new URLSearchParams(two).toString();
}
It's not gonna count order of fields, but it seems to be way less complicated :)
defaultValue and value in the element itself. developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement it('should generate form data', async () => {
const buffer1 = res.getBuffer().toString().replaceAll(res.getBoundary(), '')
const buffer2 = formData.getBuffer().toString().replaceAll(formData.getBoundary(), '')
expect(buffer1).to.be.equal(buffer2)
})
