I made a function with a fetch and it shows no errors until I run it. When I run it I get the error below. I ran it through jshint and jslint and they do not show any issues. This is pretty much a copy/paste of a function I have that works fine. Do you all see anything wrong?
Error from browser
Uncaught (in promise) SyntaxError: Unexpected end of JSON input
at HTMLInputElement.<anonymous> (admin:429:59)
this.element.querySelector("#product-btn").addEventListener("click", async function(e) {
// Make sure that the form isn't actually being sent.
e.preventDefault();
e.stopPropagation();
form=document.getElementById('product-upload');
const fields = {
csrf_token: {
input: document.getElementById('csrf_token'),
error: document.getElementById('csrf_token-error')
},
title: {
input: document.getElementById('title'),
error: document.getElementById('title-error')
},
description: {
input: document.getElementById('description'),
error: document.getElementById('description-error')
},
cost: {
input: document.getElementById('cost'),
error: document.getElementById('cost-error')
},
old_cost: {
input: document.getElementById('old_cost'),
error: document.getElementById('old_cost-error')
}
};
//This shows error in lint but it's jinja for python and works fine
const response = await fetch('{{ url_for('main.upload_products') }}', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
csrf_token: fields.csrf_token.input.value,
title: fields.title.input.value,
description: fields.description.input.value,
cost: fields.cost.input.value,
old_cost: fields.old_cost.input.value
})
});
//THE code below is where the error points to
data = await response.json();
if (response.ok) {
myDropzone.processQueue();
} else {
const errors = data;
form.classList.add('was-validated');
Object.keys(errors).forEach((key) => {
fields[key].input.classList.add('is-invalid');
fields[key].error.innerHTML = errors[key][0];
});
}
});