Lab. Fetch

Mục đích

Bài thực hành này sử dụng fetch API thay cho XMLHtttRequest (AJAX) như trong Lab. JSON. Phân tích dữ liệu JSON và tạo các đối tượng DOM theo dữ liệu JSON nhận được.

Nội dung

Cho backend URL /data trả về dữ liệu JSON. Hãy viết một trang sử dụng Fetch API để tải dữ liệu JSON về, sử dụng JavaScript tạo các đối tượng DOM theo dữ liệu JSON nhận được và hiển thị chúng trên giao diện.

Ví dụ mẫu như sau:

Họ và tên Tuổi Số lượng/Tên-mẫu xe

Hướng dẫn thực hiện

  1. Gọi phương thức fetch() để gửi request và nhận response
  2. Gọi phương thức response.json() để đọc dữ liệu JSON trong body của response.
  3. Duyệt mảng đối tượng JavaScript, với mỗi đối tượng, tạo các đối tượng DOM làm hàng và ô của bảng rồi đưa vào bảng.