时间戳

首页 > 解决方案 > 如何从 JSON 文件和 HTML 中删除？

javascript - 如何从 JSON 文件和 HTML 中删除？

问题描述

我有这段代码，但现在我不知道如何从那里删除，如果我点击 X。我想找到行的 id，然后把它放在 url 后面。现在我不知道如何找到ID。

const tBody = document.getElementById("tbody");
var url = "http://localhost:3000/users";

//
fetch(url, {method: "get"})
.then(result => {return result.json()})
.then(data => {document.addEventListener('DOMContentLoaded', (event) => {
        tBody.innerHTML="";
        for(let i = 0; i < data.length; i++){
            let newRow = document.createElement("tr");
            newRow.innerHTML =  `
                                <td>${data[i].id}</td>
                                <td>${data[i].title}</td>
                                <td>${data[i].author}</td>
                                <td> <button class="delete btn btn-primary">X</button> </td>`
            tBody.appendChild(newRow);
        } 

    });
});

//
const submitButton = document.getElementById("submit-button");
const titleInput = document.getElementById("inputTitle");
const authorInput = document.getElementById("inputAuthor");

submitButton.addEventListener("click", function(e){
    e.preventDefault();
    var newUser = {
        title: titleInput.value,
        author: authorInput.value,
    };
    var van = true;
    fetch(url, {method: "get"})
    .then(result => {return result.json()})
    .then(data => {
        for(let i = 0; i < data.length; i++){
            if (data[i].title===titleInput.value || data[i].author===authorInput.value) {
                var z = i + 1;
                var x = "/" + z;
                var postUrl = url + x;
                fetch(postUrl, {
                    method: 'PUT',
                    body: JSON.stringify(
                        {
                            title: titleInput.value,
                            author: authorInput.value,
                            id: data[i].id
                        }
                    ),
                    headers: {
                        "Content-type": "application/json; charset=UTF-8"
                    }
                });
                van = false;
            } 
        }  
        if(van===true) {
            fetch(url, {
                method: 'POST',
                headers: {
                    "Content-type": "application/json; charset=UTF-8"
                },
                body: JSON.stringify(newUser)
            }).then(response => response.json)
            .then(json => console.log(json));
        }
    });
});

我试过这个：

var tomb = [];
const removeTomb=(id)=>{
fetch(url, {method: "get"})
.then(result => {return result.json()})
.then(data => {
    for(let i = 0; i < data.length; i++){
        var b = {
            id: data[i].id,
            title: data[i].title,
            author: data[i].author
        }
        tomb.push(b);
        console.log(tomb);
    }

        let index=tomb.findIndex(tomb => tomb.id==id);
        tomb.splice(index,1);
        console.log(tomb);


});
};

我把它放在onclick="removeTomb(${tomb[i].id})"X 之前，但它不起作用，因为 removeTomb 是未定义的。你能解释一下它是如何工作的吗？我想从中学习！非常感谢！

标签： javascriptjson

解决方案

使用const，函数文字方式不适用于 HTML onclick="removeTomb(${tomb[i].id})"。尝试function removeTomb 或将功能分配给窗口。

window.removeTomb = removeTomb

或者

var tomb = [];
function removeTomb(id) {
  fetch(url, { method: "get" })
    .then((result) => {
      return result.json();
    })
    .then((data) => {
      for (let i = 0; i < data.length; i++) {
        var b = {
          id: data[i].id,
          title: data[i].title,
          author: data[i].author,
        };
        tomb.push(b);
        console.log(tomb);
      }

      let index = tomb.findIndex((tomb) => tomb.id == id);
      tomb.splice(index, 1);
      console.log(tomb);
    });
};

推荐阅读