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>