REST API - Dùng hàm FETCH để lấy danh sách user hiển thị lên bảng

Ví dụ sau sẽ DEMO cách lấy dữ liệu từ API về và hiển thị thành bảng. Link để truy cập vào API của bạn giả sử là:

Giả sử bạn có danh sách user như sau:

Làm sao để có danh sách và api như trên, bạn đọc bài viết này nhé https://zezo.dev/restful-api-43/tu-tao-server-restful-api-json-bang-typicode-json-server.74.html

Bây giờ sẽ viết code để lấy dữ liệu

Bước 1: Tạo mẫu bảng để trình bày dữ liệu

HTML:

<table id="ds-u" border="1">
    <tr>
            <th>ID</th>
            <th>Username</th>
            <th>Fullname</th>
            <th>Email</th>
    </tr>
</table>

Bước 2: Viết thẻ script ở cuối trang, bên trong viết lần lượt các thao tác sau

- Khai báo biến để cho đường dẫn vào:

JavaScript:

var url = "http://localhost:3000/user";

- Viết mẫu code sau ở dưới để chạy thử, sau khi lưu lại, chạy trên trình duyệt và xem log.

JavaScript:

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);
        });

Bước 3: Sau khi chạy thử bạn xem thấy log hiện danh sách là ok, giờ vào code sửa thêm: Tìm đến dòng có chữ console.log(data); bạn thêm vào sau nó đoạn code dưới này

JavaScript:

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;

            }

Code ở trên dùng lệnh for thường để duyệt mảng, bạn cũng có thể dùng hàm forEach() của mảng để thực hiện

Bước 4: Bạn chạy lại trang web để xem kết quả hiển thị trên màn hình

Bước 5: Nếu có lỗi thì tham khảo thêm phần code dưới đây.

<!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>
</head>

<body>
    <table id="ds-u" border="1">
        <tr>
            <th>ID</th>
            <th>Username</th>
            <th>Fullname</th>
            <th>Email</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;

            }

        });
    </script>
</body>
</html>