Hướng dẫn api javascript - API Javascript

Nguồn dữ liệu

Nguồn dữ liệu chúng ta sẽ dùng cho API JSON //www.gov.uk/bank-holiday.json

Khai báo

Trong JavaScript, đầu tiên chúng ta phải khai báo để dễ dàng thao tác phía bên dưới.

// Khai báo một biến, để dễ thao tác
const endpoint = ' //www.gov.uk/bank-holiday.json';
// đơn giản vậy thôi.
fetch[endpoint]

Kiểu tra giá trị với console.log[]

Chúng ta sử dụng .then[] để làm điều bạn muốn sau khi vừa fetch xong. Và console.log[] để kiểm tra log, giá trị được trả về.

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

const endpoint = '//www.gov.uk/bank-holidays.json';
fetch[endpoint]
.then[[response]=>console.log[response]];

Đây là kết quả khi thực hiện xong đoạn code trên

javascript fetch api

Ở đây có phần Promise sẽ thực hiện ngay khi trả về Response. Chúng ta có thể kiểm tra một số thuộc tính trên đó để xem những gì chúng ta có thể làm với data . Nếu bạn xem trong Promise, bạn sẽ nhận thấy loại response của chúng ta là 

const endpoint = '//www.gov.uk/bank-holidays.json';
fetch[endpoint]
.then[[response]=>console.log[response]];

0và chúng ta dùng

const endpoint = '//www.gov.uk/bank-holidays.json';
fetch[endpoint]
.then[[response]=>console.log[response]];

1 sau đó. Hãy ghi nhớ điều đó . Và 

const endpoint = '//www.gov.uk/bank-holidays.json';
fetch[endpoint]
.then[[response]=>console.log[response]];

2sẽ cho chúng ta thấy kiểu JSON.

Thay đổi kiểu trả về với .json[] tr Javascript

Bây giờ, chúng tôi sẽ sử dụng 

const endpoint = '//www.gov.uk/bank-holidays.json';
fetch[endpoint]
.then[[response]=>console.log[response]];

3 cho phần reponse của chúng ta và sau đó dùng ngay console.log[] để xem tất cả thông tin được return trên JavaScript

const endpoint = '//www.gov.uk/bank-holidays.json';
fetch[endpoint]
     .then[[response] => response.json[]]
     .then[[data] => console.log[data]];

Đây là kết quả

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

Kết quả lồng nhau

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

const endpoint = '//www.gov.uk/bank-holidays.json';
fetch[endpoint]
     .then[[response] => response.json[]]
     .then[[data] => handleData[data];

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.

function handleData[data]{
 let bankHolidays = data; //For ease
 let england = bankHolidays["england-and-wales"].events;
// Bây giờ chúng ta ánh xạ từng object bên trong'england'
// có thể là kiểu mảng array hoặc đối tượng object
// Gán cho biến html để thêm từng object vào.
const html = england.map[[items] =>{
return `
              
${items.title} 
 [${date} / ${month} / ${year}]  
              `;
              }
            }].join[''];
 }];

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 

const endpoint = '//www.gov.uk/bank-holidays.json';
fetch[endpoint]
.then[[response]=>console.log[response]];

4 của mảng thành định dạng có thể sử dụng trong HTML . Ngoài ra, vì 

const endpoint = '//www.gov.uk/bank-holidays.json';
fetch[endpoint]
.then[[response]=>console.log[response]];

5trả về một mảng khác, chúng ta sử dụng 

const endpoint = '//www.gov.uk/bank-holidays.json';
fetch[endpoint]
.then[[response]=>console.log[response]];

6ở cuối để trả về một chuỗi.

Nếu bạn đang bối rối ở đây, chỉ cần đọc 

const endpoint = '//www.gov.uk/bank-holidays.json';
fetch[endpoint]
.then[[response]=>console.log[response]];

5 để có thể hiểu rõ hơn

Gắn dữ liệu vào trang web với .innerHTML[]

Bây giờ chúng ta có biến

const endpoint = '//www.gov.uk/bank-holidays.json';
fetch[endpoint]
.then[[response]=>console.log[response]];

8 chứa tất cả mọi thứ cần , chúng ta thực hiện điều này một cách dễ dàng bằng 

const endpoint = '//www.gov.uk/bank-holidays.json';
fetch[endpoint]
.then[[response]=>console.log[response]];

9]

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

const ul = document.getEuityById ['holiday'];

và bây giờ, chúng ta thêm đoạn code sau vào function

ul.innerHTML = html;

Đơn giản như vậy thôi, bạn đã 

const endpoint = '//www.gov.uk/bank-holidays.json';
fetch[endpoint]
     .then[[response] => response.json[]]
     .then[[data] => console.log[data]];

0API để lấy dữ liệu,chỉ cần thao tác một chút để hiển thị trong HTML theo ý của bạn.

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

//codepen.io/mushroom23/pen/NOxBOM

Kết luận

Qua 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.

• Technical Architect
• Software Engineer in Distributed Systems.
• Hobbies: LQM, Chess, Reading.