Video học lập trình mỗi ngày

Bạn có biết Schiffmann, người Mỹ gốc Anh 17 tuổi đã tạo ra trang web nổi tiếng "ncov2019.live". Vậy anh ấy đã lấy data ở đâu và cách lấy như thế nào? Bài viết đây, sẽ giúp bạn lấy được những thông số đó. Biết đâu bạn sẽ tạo nên cơn sốt.

Nói đùa thôi, nếu bạn ở Việt Nam thì đừng nên tạo một trang như trên. Nếu bị sai sót thôi là các bạn sẽ lên phường ngay lập tức. Vì tội, tung tin sai sự thật về tình hình "Dịch Covid 19". 

Và dưới đây chúng ta sẽ thử tạo một page nho nhỏ để get data đó về nhé. Các bạn có thể xem DEMO phía dưới.

Html

<h1 class="text-center">FETCH API</h1>
<div class="container text-center">
<button class="btn btn-primary" id="btn1">Covid 19 - Global</button>
</div>
</br>
<div class="container text-center">
<button class="btn btn-primary" id="btn1-vn">Covid 19 - Viet Nam</button>
</div>
<div class="container text-center" id="results"></div>

Javascript

var btn1 = document.getElementById("btn1");
var btn1_vn = document.getElementById("btn1-vn");
btn1_vn.addEventListener('click', () => {

// fetch request to api

fetch('https://corona.lmao.ninja/v2/countries/vn')
.then((response) => {
return (response.json());
})
.then((data) => {
results.innerHTML = `
<ul class="list-group mb-4">
<li class="list-group-item"><strong>Country: ${data.country}</strong></li>
<li class="list-group-item"><strong>Cases: </strong> ${data.cases}</li>
<li class="list-group-item"><strong>Deaths: </strong> ${data.deaths}</li>
</ul>
`;
})
})
btn1.addEventListener('click', () => {

// fetch request to api

fetch('https://corona.lmao.ninja/v2/countries')
.then((response) => {
return (response.json());
})
.then((data) => {

var results = document.getElementById('results');

var template = `
<h4 class="mt-4">Covid Cases</h4>
`
data.forEach((element) => {
template += `
<ul class="list-group mb-4">
<li class="list-group-item"><strong>Country: ${element.country}</strong></li>
<li class="list-group-item"><strong>Cases: </strong> ${element.cases}</li>
<li class="list-group-item"><strong>Deaths: </strong> ${element.deaths}</li>
</ul>
`
})

results.innerHTML = template;
})
})

DEMO: Fetch API lấy dữ liệu Covid 19

Youtube: https://www.youtube.com/watch?v=gOBluM4NMj8