REST API - Dùng hàm Fetch để xóa một bản ghi

Chức năng này sẽ dùng phương thức DELETE

Bước 1: Hãy copy 1 bản code ở bài viết này để làm công cụ thực hành https://zezo.dev/restful-api-43/rest-api-dung-ham-fetch-de-lay-danh-sach-user-hien-thi-len-bang.76.html

Bước 2: Trong thẻ bảng thêm 1 thẻ TH nữa để hiển thị chức năng <th>Action</th> như trong ảnh

Bước 3: Tìm code chỗ thêm dòng vào bảng và thêm đoạn code như trong ảnh

Bước 4: Viết hàm xóa ở cuối cùng của thẻ script

Dưới đây là code đầy đủ:

HTML:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>https://saophaixoan.net</title>
    <style>
        th {
            width: 150px;
        }
    </style>
</head>

<body>

    <table id="ds-u" border="1">
        <tr>
            <th>ID</th>
            <th>Username</th>
            <th>Fullname</th>
            <th>Email</th>
            <th>Action</th>
        </tr>
    </table>
    <script>
        var url = "http://localhost:3000/user";

        fetch(url, {
            method: "GET"
        }).then(function(res) {
            return res.json(); // chuyển chuỗi nhận được thành đối tượng json
        }).then(function(data) {
            // các lệnh xử lý cho dữ liệu ở đây: các công việc hiển thị.
            console.log(data);

            //duyệt mảng và tạo các element cho vào bảng

            var bang = document.querySelector('#ds-u');
            for (i = 0; i < data.length; i++) {
                var obj = data[i];
                // Tạo thêm 1 dòng ở cuối bảng bằng cú pháp sau
                let dong_moi = bang.insertRow(-1);

                // Thêm ô thứ nhất, chỉ số thứ tự là 0, ô này dùng để hiển thị ID
                let o1 = dong_moi.insertCell(0);
                o1.innerText = obj.id;

                // Thêm ô thứ hai, chỉ số thứ tự là 1, ô này dùng để hiển thị username
                let o2 = dong_moi.insertCell(1);
                o2.innerText = obj.username;

                // Thêm ô thứ ba, chỉ số thứ tự là 2, ô này dùng để hiển thị fullname
                let o3 = dong_moi.insertCell(2);
                o3.innerText = obj.fullname;

                // Thêm ô thứ bốn, chỉ số thứ tự là 3, ô này dùng để hiển thị email
                let o4 = dong_moi.insertCell(3);
                o4.innerText = obj.email;

                // Thêm ô thứ năm, chỉ số thứ tự là 4, ô này dùng để hiển thị nút bấm sửa và xóa
                let o5 = dong_moi.insertCell(4);
                // tạo nút bấm xóa:
                var btn_xoa = document.createElement('button');
                btn_xoa.setAttribute('type', 'button');
                btn_xoa.innerText = "Xóa";
                btn_xoa.setAttribute('onclick', 'DeleteRow(' + obj.id + ')') // truyền vào id user
                o5.appendChild(btn_xoa);

            }

        });

        function DeleteRow(id) {
            let url_delete = 'http://localhost:3000/user/' + id;
            fetch(url_delete, {
                method: "DELETE"
            }).then(function(res) {
                return res.json(); // chuyển chuỗi nhận được thành đối tượng json
            }).then(function(data) {
                // các lệnh xử lý cho dữ liệu ở đây: các công việc hiển thị.
                // console.log(data);
                location.reload();
            });
        }
    </script>
</body>
</html>

Link file DB: https://zezo.dev/uploads/javascript/restful-api/db_blog.zip