Đây là hướng dẫn mã thực hành về cách tìm nạp dữ liệu bằng cách sử dụng JavaScript đơn giản và Hiển thị dữ liệu trên một trang web HTML đơn giản
Khi tạo trang web, có khả năng bạn sẽ lấy dữ liệu từ API. Dữ liệu ở dạng JSON, trong hầu hết các trường hợp
Làm cách nào để hiển thị JSON là trang HTML của tôi bằng vanilla JS?
Hãy làm điều đó trong một vài bước
JS có một chức năng tích hợp có tên là
function fetchData[] {
}
fetchData[]
Hãy làm việc trên một dự án đơn giản
Chúng tôi sẽ tìm nạp tên quốc gia và chữ viết tắt của chúng từ tệp JSON và liệt kê chúng trên trang HTML
BẢN THỬ TRỰC TIẾP
Bắt đầu bằng cách tạo một tệp HTML đơn giản.
function fetchData[] {
}
fetchData[]
JSON-JS
countries: a long list
Tôi đã thêm div trống
fetch[].then[].then[].catch[]
Ở dòng 29, tôi đã sử dụng
fetch[].then[].then[].catch[]
Trên cùng thư mục/thư mục mà bạn đã tạo tệp
function fetchData[] {
}
fetchData[]
fetch[].then[].then[].catch[]
trên tệp js, tạo một hàm trống và sau đó gọi nó ở cuối tệp
function fetchData[] {
}
fetchData[]
trong hàm fetchData[] chúng ta sẽ thêm đoạn code lấy dữ liệu từ file JSON sau đó tạo list trên HTML
tìm nạp có một cú pháp đơn giản
fetch[].then[].then[].catch[]
nói một cách đơn giản
Phần đầu tiên.
fetch[].then[].then[].catch[]
fetch[].then[].then[].catch[]
fetch[].then[].then[].catch[]
Tải xuống tệp JSON của các quốc gia và thêm nó vào cùng thư mục với tệp chỉ mục và tập lệnh
Cho phép, thêm đường dẫn đến tệp dữ liệu của chúng tôi
function fetchData[] {
}
fetchData[]
Tệp js hiện tại của bạn bây giờ sẽ chứa
function fetchData[] {
}
fetchData[]
Bây giờ, hãy nhận phản hồi của chúng tôi và làm cho nó ở định dạng json
function fetchData[] {
}
fetchData[]
fetch[] trả về một lời hứa với một phản hồi. "res", sau đó chúng tôi chuyển đổi thành định dạng JSON
Tệp js hiện tại của bạn bây giờ sẽ chứa
function fetchData[] {
}
fetchData[]
Bây giờ chúng tôi hiển thị dữ liệu của chúng tôi. chúng ta có thể kiểm tra sự thành công bằng bảng điều khiển,
function fetchData[] {
}
fetchData[]
Như bạn có thể thấy trên ảnh chụp màn hình, dữ liệu được hiển thị trong một mảng dữ liệu
Cuối cùng, hãy thêm một trình xử lý lỗi vào
fetch[].then[].then[].catch[]
function fetchData[] {
}
fetchData[]
Hiển thị dữ liệu trên trang HTML
Chúng tôi làm điều này từ js bằng DOM, chúng tôi truy cập vào một phần của trang web.
fetch[].then[].then[].catch[]
Trước tiên hãy cập nhật tệp tập lệnh của bạn thành
JSON-JS
countries: a long list
Giải trình
Chúng tôi đã thêm
function fetchData[] {
}
fetchData[]
Đầu tiên tôi tạo tiêu đề và gán nó cho biến 'đầu ra'
function fetchData[] {
}
fetchData[]
Vì dữ liệu chúng tôi nhận được ở dạng mảng, chúng tôi sử dụng
fetch[].then[].then[].catch[]
tài liệu forEach[]
function fetchData[] {
}
fetchData[]
Đoạn mã trên sẽ đi qua toàn bộ mảng dữ liệu được trả về
function fetchData[] {
}
fetchData[]
Trong đoạn mã trên, mã lấy từng mục từ mảng và đặt nó vào danh sách
Tôi sử dụng mẫu chữ [
function fetchData[] {
}
fetchData[]
function fetchData[] {
}
fetchData[]
function fetchData[] {
}
fetchData[]
tài liệu chữ mẫu
Cuối cùng, chúng tôi hiển thị dữ liệu
function fetchData[] {
}
fetchData[]
Dòng mã trên lấy div có id là 'quốc gia' và sử dụng
function fetchData[] {
}
fetchData[]
function fetchData[] {
}
fetchData[]