Skip to content

Instantly share code, notes, and snippets.

@HelloAlberuni

HelloAlberuni/fetch-api.js

Created June 19, 2021 14:30
Show Gist options
  • Save HelloAlberuni/40184af781b563d1fa09096938394948 to your computer and use it in GitHub Desktop.
Save HelloAlberuni/40184af781b563d1fa09096938394948 to your computer and use it in GitHub Desktop.
Download ZIP
Replace existing Fetch api practice sandbox with Arrow function
Raw
fetch-api.js
document.getElementById('button1').addEventListener('click', getText );
document.getElementById('button2').addEventListener('click', getJSON );
document.getElementById('button3').addEventListener('click', getExternal );
// fetch data from local .txt file
// normal way
// function getText(e){
// e.preventDefault();
// fetch('test.txt')
// .then(function(res){
// return res.text();
// })
// .then(function(data){
// document.getElementById('output').innerHTML = data;
// })
// .catch(function(err){
// console.log(err);
// });
// }
// convert to arrow function
function getText(e){
e.preventDefault();
fetch('test.txt')
.then( res => res.text() )
.then( data => document.getElementById('output').innerHTML = data )
.catch( err => console.log(err) );
}
// Get data from local json file
// Normal way
// function getJSON(e){
// e.preventDefault();
// fetch('posts.json').then(function(response){
// response.json()
// .then(function(response){
// return response;
// })
// .then(function(data){
// var output = '';
// data.forEach(function(element){
// output += `<li>${element.title} - ${element.body}</li>`;
// });
// document.getElementById('output').innerHTML = output;
// })
// .catch(function(err){
// console.log(err);
// });
// });
// }
// convert to arrow function
function getJSON(e){
e.preventDefault();
fetch('posts.json').then( response => {
response.json()
.then( response => response )
.then( data => {
var output = '';
data.forEach( element => {
output += `<li>${element.title} - ${element.body}</li>`;
});
document.getElementById('output').innerHTML = output;
})
.catch(function(err){
console.log(err);
});
});
}
// normal way
// function getExternal(e){
// e.preventDefault();
// fetch('https://jsonplaceholder.typicode.com/users').then(function(response){
// response.json()
// .then(function(response){
// return response;
// })
// .then(function(data){
// var output = '';
// data.forEach(function(element){
// output += `<li>${element.id} - ${element.name}</li>`;
// });
// document.getElementById('output').innerHTML = output;
// })
// .catch(function(err){
// console.log(err);
// });
// });
// }
// convert to arrow function
function getExternal(e){
e.preventDefault();
fetch('https://jsonplaceholder.typicode.com/users').then( response => {
response.json()
.then( response => response )
.then( data => {
var output = '';
data.forEach( element => {
output += `<li>${element.id} - ${element.name}</li>`;
});
document.getElementById('output').innerHTML = output;
})
.catch(function(err){
console.log(err);
});
});
}
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.css" />
<title>Ajax Sandbox</title>
</head>
<body>
<div class="container">
<h1>Fetch API Sandbox</h1>
<button id="button1">Get Text</button>
<button id="button2">Get JSON</button>
<button id="button3">Get API Data</button>
<br><br>
<div id="output"></div>
</div>
<script src="app.js"></script>
</body>
</html>
Raw
posts.json
[
{"title": "Title 1", "body": "Body 1"},
{"title": "Title 2", "body": "Body 2"},
{"title": "Title 3", "body": "Body 3"}
]
Raw
test.txt
Hello from test.txt
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment