Lấy dữ liệu từ api javascript
Nguồn dữ liệuNguồn dữ liệu chúng ta sẽ dùng cho API JSON https://www.gov.uk/bank-holiday.json Show Khai báoTrong JavaScript, đầu tiên chúng ta phải khai báo để dễ dàng thao tác phía bên dưới.
Kiểu tra giá trị với console.log()Chúng ta sử dụng Bạn có thể tham khảo Logs NodeJS là gì ? Và tại sao nên dùng ? để hiểu rõ hơn về log
Đây là kết quả khi thực hiện xong đoạn code trên Ở đây có phần Promise sẽ thực hiện ngay khi trả về Response Thay đổi kiểu trả về với .json() tr JavascriptBây giờ,
chúng tôi sẽ sử dụng
Đây là kết quả Chúng ta đã nhìn thấy kết quả và dễ dàng biết được chi tiết qua console.log() Bạn có thể xem chi tiết hơn những thuộc tính bên trong bằng cách click vào hình tam giác ngoài cùng bên trái. Đây là kết quả của chúng console.log() luôn giúp bạn kiểm tra xem dữ liệu trả về có đúng như bạn mông muốn hay không. Trong phần này, thông tin bạn cần quan tâm nhất là titlt và date. Bạn muốn lấy giá trị tilte bằng cách data.england-and-wales.title . Điều này là sai vì trong england-and-wales có các dấu – . Vì vậy data[england-and-wales].title như thế này mới là đúng, bạn sẽ lấy được title. Lấy dữ liệu và thao tác bằng handleData()Ở bước này không chỉ hiện như hàm console.log(), để có thể sử dụng và có thể làm mọi thứ với dữ liệu chúng ta sử dụng hàm handleData
Thao tác nâng cao với hàm handleData()Ở trong hàm handleData() trên JavaScript. Chúng ta sẽ viết đoạn code dưới vào hàm để lấy tilte và date của england-and-wales như ý bạn muốn để hiển thị và thao tác với chúng.
Trong trường hợp break ở đây. Tất cả những gì chúng ta đang làm là ánh xạ qua event của mảng và sử dụng backticks (hoặc mẫu chữ) do JavaScript 6 để chuyển các mục bên trong Nếu bạn đang bối rối ở đây, chỉ cần đọc Gắn dữ liệu vào trang web với .innerHTML()Bây giờ chúng ta có biến HTML của chúng ta đơn giản như sau
và chúng ta chỉ cần thêm đoạn này ở đầu đoạn script JS
và bây giờ, chúng ta thêm đoạn code sau vào function
Đơn giản như vậy thôi, bạn đã Bạn có thể tham khảo code hoàn chỉnh tại đây: https://codepen.io/mushroom23/pen/NOxBOM Kết luậnQua bài viết này, bạn có thể hiểu được cách JavaScript fetch API để lấy dữ liệu một cách đơn giản. Và bạn có thể biến hoá tùy chỉnh HTML xuất ra theo ý bạn dựa trên CSS.
|