Simple Fetch API Menggunakan Javascript
Assalamu'alaikum, wr.wb, jumpa lagi bersama admin pada postingan ini, kali ini admin akan share fetch API secara simple menggunakan Javascript, tidak panjang cerita langsung kita eksekusi.
Langkah Pertama siapkan 2 file, index.html dan app.js
app.js
async function getUsers() {
let url = 'your-url';
try {
let res = await fetch(url);
return await res.json();
} catch (error) {
console.log(error);
}
}
async function renderUsers() {
let users = await getUsers();
let html = '';
users.forEach(user => {
let htmlSegment = `<div class="user">
<h1>${user.name}</h1>
<h2>${user.positif} ${user.sembuh}</h2>
</div>`;
html += htmlSegment;
});
let container = document.querySelector('.container');
container.innerHTML = html;
}
renderUsers();
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fetch API Demo</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container">
</div>
<script src="app.js"></script>
</body>
</html>
#075777, #067fb3
Comments
Post a Comment