语法错误：JSON中位置0处的意外令牌<-不知道为什么

Question

I am receiving the above mentioned error when trying to update my database. I read about why that might be but I am confused because I have already made the CRUD for 2 other tables in php+javascript so I was just copy pasting and rewriting for the corresponding rows, etc. (And I have already copy-pasted it multiple times to see if i just made a spelling mistake)

Every console log works until that response.json() bit.

 // DELETE AND UPDATE SANDWICH document.addEventListener('click', function(e){ if (e.target.classList.contains('btnDeleteSandwich')){ const sandwichId = parseInt(e.target.dataset.id); console.log(sandwichId); fetch("../backend/api-delete-sandwich.php?id="+ sandwichId, { method:'delete' }) .then(function(response){ return response.json(); }) .then(function(response){ console.log(response); document.getElementById('sandwich'+sandwichId).remove(); }) } if (e.target.classList.contains('btnEditSandwich')){ const sandwichId = parseInt(e.target.dataset.id); let sandwich; for (let i = 0; i<allSandwiches.length;i++){ if (allSandwiches[i].id_sandwich==sandwichId){ sandwich=allSandwiches[i]; } } console.log(sandwich); // * this is for filling in the update form with existing date but disabled for the moment // const updateName = document.getElementById("updateName"); // updateName.value = pizza.name; // const updatePizzaType = document.getElementById("updatePizzaType"); // updatePizzaType.value = pizza.type; // const updatePizzaIngredients = document.getElementById("updatePizzaIngredients"); // updatePizzaIngredients.value = pizza.ingredients; // const updatePizzaNormalPrice = document.getElementById("updatePizzaNormalPrice"); // updatePizzaNormalPrice.value = pizza.n_size_price; // const updatePizzaLargePrice = document.getElementById("updatePizzaLargePrice"); // updatePizzaLargePrice.value = pizza.l_size_price; document.querySelector('#btnUpdateSandwich').setAttribute('data-id', sandwichId); } }); const btnUpdateSandwich = document.querySelector('#btnUpdateSandwich'); btnUpdateSandwich.addEventListener('click', function(){ const formUpdateSandwich = document.querySelector('#formUpdateSandwich'); const formUpdateSandwichData = new FormData(formUpdateSandwich); const sandwichId = parseInt(btnUpdateSandwich.dataset.id); console.log(formUpdateSandwichData); console.log(formUpdateSandwich); fetch("../backend/api-edit-sandwich.php?id="+ sandwichId, { method:'post', body:formUpdateSandwichData }) .then(function(response){ return response.json(); }) .then(function(response){ console.log(response); }) .catch(function(err){ console.log(err); }) }) 

I'm rather new here so if you need any extra intel to solve the issue, please let me know.

Answer 1

Try checking to ensure the response is okay and adding a catch to your first promise chain. Your api may be returning an error that isn't being caught. I've updated your example with code from the error handling example as specified in the MDN docs for fetch:

document.addEventListener('click', function(e){
if (e.target.classList.contains('btnDeleteSandwich')){
    const sandwichId = parseInt(e.target.dataset.id);
    console.log(sandwichId);
    fetch("../backend/api-delete-sandwich.php?id="+ sandwichId, {
        method:'delete'
    })
        .then(function(response){
            if(response.ok) {
                return response.json();
            }
            throw new Error('Network response was not ok.');
        })
        .then(function(response){
            console.log(response);
            document.getElementById('sandwich'+sandwichId).remove();
        })
        .catch(function(error){
            console.log('There has been a problem with your fetch operation: ', error.message);
        })
}