Cách lấy api của 1 trang web

     

Trong bài viết này, tôi đang trình bày một ví dụ dễ dàng về cách mang dữ liệu bằng JavaScript từ bỏ API bởi cách tiến hành fetch () với sau đó đổ tài liệu vào trang web.quý khách hàng sẽ xem: Cách lấy api của một trang web


*

*

Nguồn dữ liệu

Nguồn tài liệu bọn họ đã sử dụng cho API JSON https://www.gov.uk/bank-holiday.json

Knhị báo

Trong JavaScript, thứ nhất chúng ta bắt buộc knhị báo để thuận lợi làm việc phía dưới.

Bạn đang xem: Cách lấy api của 1 trang web

// Knhì báo một biến, nhằm dễ thao tácconst endpoint = " https://www.gov.uk/bank-holiday.json";// dễ dàng và đơn giản vậy thôi.fetch(endpoint)

Kiểu tra quý giá với console.log()

Chúng ta áp dụng.then() để gia công điều bạn có nhu cầu sau khi vừa fetch chấm dứt. Và console.log() nhằm soát sổ log, giá trị được trả về.

Quý khách hàng có thể tham khảo Logs NodeJS là gì ? Và tại sao phải cần sử dụng ? nhằm làm rõ rộng về log

const endpoint = "https://www.gov.uk/bank-holidays.json";fetch(endpoint).then((response)=>console.log(response));Đây là tác dụng lúc triển khai chấm dứt đoạn code trên


*

javascript fetch api

Tgiỏi đổi hình dạng trả về với .json() tr Javascript

Bây giờ, Cửa Hàng chúng tôi đang sử dụng.json() cho phần reponse của họ và kế tiếp cần sử dụng tức thì console.log() giúp thấy tất cả thông tin được return trên JavaScript

const endpoint = "https://www.gov.uk/bank-holidays.json";fetch(endpoint) .then((response) => response.json()) .then((data) => console.log(data));Đây là công dụng


*

kết quả

Chúng ta đã nhìn thấy công dụng cùng thuận tiện biết được cụ thể qua console.log()

quý khách hàng có thể xem chi tiết hơn số đông thuộc tính phía bên trong bằng phương pháp clichồng vào hình tam giác xung quanh cùng phía bên trái. Đây là tác dụng của chúng


*

Kết trái lồng nhau

console.log() luôn luôn giúp đỡ bạn đánh giá coi dữ liệu trả về có đúng như chúng ta mông mong hay là không.Trong phần này, lên tiếng bạn phải quan tâm tuyệt nhất là titlt cùng date.Bạn ý muốn rước giá trị tilte bằng phương pháp data.england-and-wales.title . Như vậy là không nên bởi vào england-and-wales tất cả những vết – . Vì vậy data.title như vậy này new là đúng, các bạn sẽ đem được title.

Lấy dữ liệu cùng làm việc bởi handleData()

Tại công đoạn này không những hiện như hàm console.log(), nhằm hoàn toàn có thể áp dụng với hoàn toàn có thể có tác dụng đông đảo sản phẩm công nghệ với tài liệu họ áp dụng hàm handleData

const endpoint = "https://www.gov.uk/bank-holidays.json";fetch(endpoint) .then((response) => response.json()) .then((data) => handleData(data);

Thao tác nâng cấp với hàm handleData()

Tại trong hàm handleData() trên JavaScript. Chúng ta đang viết đoạn code bên dưới vào hàm để mang tilte cùng date của england-and-wales như mong muốn bạn muốn để hiển thị cùng làm việc với bọn chúng.

Xem thêm: Clip Hôn Nhau Say Đắm - Hôn Nhau Say Đắm Trong Phòng Ngủ, Truyen Ngan

function handleData(data) let bankHolidays = data; //For ease let england = bankHolidays.events;// Bây giờ đồng hồ chúng ta ánh xạ từng object bên trong"england"https:// có thể là mẫu mã mảng array hoặc đối tượng người dùng object// Gán cho đổi mới html nhằm thêm từng object vào.const html = england.map((items) =>return ` $items.title ($date / $month / $year) `; ).join(""); });Trong ngôi trường đúng theo break ở chỗ này.Tất cả đông đảo gì họ đã làm là ánh xạ qua event của mảng và sử dụngbackticks (hoặc mẫu mã chữ)bởi JavaScript 6 để đưa những mục mặt trongevent của mảng thành định dạng có thể áp dụng trong HTML .Bên cạnh đó, bởi vì.map()trả về một mảng không giống, họ thực hiện.join("")ngơi nghỉ cuối nhằm trả về một chuỗi.

Xem thêm: Làm Sao Để Hết Ria Mép Ở Con Gái, Note 5 Cách Tẩy Ria Mép Ở Con Gái Cực Chất

Nếu bạn đang hoảng sợ tại chỗ này, chỉ cần gọi.map() để hoàn toàn có thể hiểu rõ hơn

Gắn tài liệu vào trang web cùng với .innerHTML()

Bây giờ chúng ta cóphát triển thành html chứa tất cả gần như trang bị buộc phải , bọn họ thực hiện điều đó một phương pháp dễ dàng bằng.innerHTML()

HTML của họ đơn giản nlỗi sau

và chúng ta chỉ cần thêm đoạn này sinh hoạt đầu đoạn script JS

const ul = document.getEuityById ("holiday");và hiện thời, chúng ta thêm đoạn code sau vào function

Bạn có thể tham khảo code hoàn chỉnh tại đây:

https://codepen.io/mushroom23/pen/NOxBOM

Kết luận

Qua nội dung bài viết này, bạn có thể đọc được cách JavaScript fetch API để lấy tài liệu một giải pháp dễ dàng. Và chúng ta có thể phát triển thành hoá tùy chỉnh HTML xuất ra theo ý các bạn dựa trên CSS.


Chuyên mục: Kiến thức thú vị