REST API - Dùng hàm FETCH để sửa một bản ghi

Có nhiều ý tưởng để trình bày form sửa bản ghi. Bạn có thể tạo 1 file sửa riêng để sửa hoặc bạn tạo 1 cái form ở trong file danh sách rồi lúc nào bấm sửa thì bạn hiển thị form sửa...
Trong bài viết này sẽ tôi hướng dẫn bạn tạo form trong trang danh sách để sửa. Ta sẽ lấy mẫu trang danh sách ở trong bài viết xóa vì trong bài viết này có chức năng xóa rồi.

Bước 1: Copy lại code trong bài viết xóa bản ghi để làm mẫu thực hành https://zezo.dev/restful-api-43/rest-api-dung-ham-fetch-de-xoa-mot-ban-ghi.78.html

Bước 2: Vào sau thẻ body bạn thêm 1 form như ảnh sau:

Bước 3: Thêm nút sửa ở trong đoạn code hiển thị danh sách.
 

Bước 4: Xuống cuối cùng trước thẻ đóng script bạn viết hàm EditRow(). Vai trò hàm này dùng để lấy dữ liệu đưa lên form cho người dùng sửa.
 

JavaScript:

function EditRow(id) {
            console.log("Edit row " + id);
            // hàm này có chức năng lấy thông tin bản ghi và hiện lên form.
            // vì nhiều khi danh sách không hiển thị hết thông tin của bản ghi nên phải load lại từ server.

            let url_delete = 'http://localhost:3000/user/' + id;

            fetch(url_delete, {
                method: "GET" // dùng phương thức get để lấy thông tin
            }).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);
                // tham số data lúc này sẽ là một đối tượng, ta sẽ sử dụng theo cách dùng của đối tượng: Tên.THuộc tính

                // thực hiện gắn dữ liệu lên form
                //         <input type="text" name="username" placeholder="Nhập username" /> <br>
                // <input type="text" name="fullname" placeholder="Nhập họ tên" /> <br>
                // <input type="text" name="email" placeholder="Nhập email" />

                document.querySelector("input[name=username]").value = data.username;
                document.querySelector("input[name=fullname]").value = data.fullname;
                document.querySelector("input[name=email]").value = data.email;

                //ngoài ra bạn cần giữ lại id để làm căn cứ gửi dữ liệu lên, có thể là thêm 1 thẻ hidden hoặc gắn luôn vào 1 thuộc tính của thẻ form
                document.querySelector("#form_edit").setAttribute('id_edit', id); // tôi gắn luôn vào thẻ form cho nhanh

                document.querySelector("#form_edit").style.display = "block";
                // ok giờ đợi người dùng sửa và bấm nút cập nhật.

            });

        }

Bước 5: Viết code cho hàm SaveUpdate() khi người dùng nhập thông tin mới xong bấm nút SaveUpdate

(Bạn xem ở bài viết kế tiếp nhé, do nội dung nhiều code nên phải tách bài viết)