API DELETE 方法问题

Question

我的 javaScript 代码有问题，因为删除功能正在运行，但它没有删除正确的数据... 例子： 1 - 测试 1 2 - 测试 2 3 - 测试 3

我的问题是当我尝试删除 test1 时，程序删除了 test3，这意味着程序总是删除列表中的最后一个数据。

拜托，你能帮忙吗？

这是我的代码：

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" class="btn" id="task2" onclick="deleteData()"> <i class="fa fa-trash"></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;

Answer 1

let taskDescription = theTask; 始终获取分配给 theTask 的最后一个值。您应该使任务成为 deleteData() 函数的参数。

text 和 theTask 不需要是全局变量。

我不确定你为什么有循环 for (let i = 0; i <= data.ScannedCount; i++)。你永远不会在循环中使用 i。

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" class="btn" id="task2" onclick="deleteData('${theTask}')"> <i class="fa fa-trash"></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;

API DELETE 方法问题

API DELETE method issue

javascript

api