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

Code: Default | Auth: 03cd82

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à:

http://localhost:3000/user

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

api-list-user.png



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
 

bang-user.png

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>