APIDELETE方法問題

我的 javaScript 代碼有問題，因為洗掉功能正在運行，但它沒有洗掉正確的資料......示例：1 - test1 2 - test2 3 - test3

我的問題是當我嘗試洗掉 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"  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;

uj5u.com熱心網友回復：

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"  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;

標籤：javascript api

上一篇：如何從兩個函式中獲取兩個隨機生成的值的結果并將它們相加？

下一篇：'submit()'方法是否會阻止執行'submit'事件偵聽器？