API - DELETE method is not working with JavaScript

Question

const init = () => {


    document.querySelector("#newTask").addEventListener("click", addNewTask);
    //document.querySelector("#deleteTask").addEventListener("click", deleteData);
    getDataa();

};

const getDataa = () => {

    addNewTask();

    const url = "https://ghu8xhzgfe.execute-api.us-east-1.amazonaws.com/tasks/2877332";
    fetch(url, {
            method: "GET",
            withCredentials: true,
            headers: {
                "x-api-key": "Itcheui2tB58SlUGe8rrP8mskudGsNDT9nfKKG9S",
                "Content-Type": "application/json"
            }


        })
        .then(resp => resp.json())
        .then(function(data) {
            console.log(data);
            // Loop to access all rows




            for (i = 0; i <= data.ScannedCount; i++) {

                let text = "";
                //const items = data.Items[i].Description;

                Array.from(data.Items).forEach(myFunction);


                // display the data to the end user and link it to the index page
                document.getElementById("displayTable").innerHTML = text;

                function myFunction(item, index) {
                    text += ' <button type="button" class="btn" id="task" onclick="deleteData()"><i class="fa fa-trash"></i></button>' + "  " + data.Items[index].Description + "<br>";

                }

            }




        })
        .catch(function(error) {
            console.log(error);
        });


}

const deleteData = () => {
    console.log("delete data ");


    //let deleteDescription = document.querySelector("#task").value;
    let xhr = new XMLHttpRequest();
    let url = "https://ghu8xhzgfe.execute-api.us-east-1.amazonaws.com/tasks/";
    let studentId = "2877332";
    let taskDescription = document.querySelector("#task").value;
    fetch(url, {
            method: 'DELETE',

            headers: {
                "Content-Type": "application/json",
                "x-api-key": "Itcheui2tB58SlUGe8rrP8mskudGsNDT9nfKKG9S",

            },

            body: {
                'StudentId': 'studentId',
                'Description': 'taskDescription',
                'version': 'JSON',
            }


        })
        .then(res => {
            if (res.ok) {
                console.log("DELETE request successful");
                getDataa();
                return res
            } else {
                console.log("DELETE request unsuccessful");
            }
            return res
        })
        .then(res => res.json())
        .then()
        .catch(error => console.log(error))


}


const addNewTask = () => {
    console.log("Adding a new task...");

    let xhr = new XMLHttpRequest();
    let url = "https://ghu8xhzgfe.execute-api.us-east-1.amazonaws.com/tasks";
    let apiKey = "Itcheui2tB58SlUGe8rrP8mskudGsNDT9nfKKG9S";
    let studentId = "2877332";
    let taskDescription = document.querySelector("#task").value;
    let params = {
        StudentId: studentId,
        Description: taskDescription
    };
    xhr.open("post", url);

    xhr.setRequestHeader("Content-Type", "application/json");
    xhr.setRequestHeader("x-api-key", apiKey);



    xhr.onreadystatechange = () => {

        if (xhr.readyState == 4) {
            console.log("New record was added ...");



        }
    }
    xhr.send(JSON.stringify(params));
};
window.onload = init;

Please, could you help with the delete function is not working as expected Please, see attached file

Answer 1

Your code is sending an Object in the body

You're also setting the values of the properties to the literal strings 'studentId' and 'taskDescription'

The following may fix your issue

  body: JSON.stringify({
    'StudentId': studentId,
    'Description': taskDescription,
    'version': 'JSON',
  })