I have an issue with my javaScript code as the delete feature is working but, it is not deleting the right data ... Example: 1 - test1 2 - test2 3 - test3

My issue is when I try to delete test1, the program deletes test3 which means the program always deletes the last data in the list.

Please, could you help?

Here's my code:

const url = "https://ghu8xhzgfe.execute-api.us-east-1.amazonaws.com/tasks/2877332";
let theTask = [];
let text = '';
const init = () => {
    document.querySelector("#newTask").addEventListener("click", addNewTask);
    addNewTask();
    getDataa();
};
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 theTask = taskDescription;

    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) {
        }
    }
    xhr.send(JSON.stringify(params));
    getDataa();
};
const getDataa = () => {
    console.log("get Data")
    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) {

                    theTask= data.Items[index].Description;
                    text  = ' <button type="button"  id="task2" onclick="deleteData()"> <i ></i> </button> '  "  "   data.Items[index].Description     "<br>";
                }
            }

        })
        .catch(function(error) {
            console.log(error);
        });
}
async function deleteData() {
    console.log("deleteing data");

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

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

            body: JSON.stringify({
                'StudentId': studentId,
                'Description': taskDescription,
                'version': 'JSON',
            }),
        })
        .then(res => res.json()).then(console.log);
        console.log(taskDescription);
        getDataa();
}
window.onload = init;

CodePudding user response：

let taskDescription = theTask; always gets the last value that was ever assigned to theTask. You should make the task a parameter to the deleteData() function.

text and theTask don't need to be global variables.

I'm not sure why you have the loop for (let i = 0; i <= data.ScannedCount; i ). You never use i in the loop.

const url = "https://ghu8xhzgfe.execute-api.us-east-1.amazonaws.com/tasks/2877332";
const init = () => {
  document.querySelector("#newTask").addEventListener("click", addNewTask);
  addNewTask();
  getDataa();
};
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 theTask = taskDescription;

  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) {}
  }
  xhr.send(JSON.stringify(params));
  getDataa();
};
const getDataa = () => {
  console.log("get Data")
  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 (let i = 0; i <= data.ScannedCount; i  ) {

        let text = '';
        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) {

          let theTask = item.Description;
          text  = ` <button type="button"  id="task2" onclick="deleteData('${theTask}')"> <i ></i> </button>   ${theTask}<br>`;
        }
      }

    })
    .catch(function(error) {
      console.log(error);
    });
}
async function deleteData(taskDescription) {
  console.log("deleteing data");

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

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

      body: JSON.stringify({
        'StudentId': studentId,
        'Description': taskDescription,
        'version': 'JSON',
      }),
    })
    .then(res => res.json()).then(console.log);
  console.log(taskDescription);
  getDataa();
}
window.onload = init;