Fetch API? How important is this to JavaScript? ..30daysofjavascript ==> Day 23
We say JavaScript is the king of the web. Now we are going to take a step forward and define web applications. What is a web application and when does a website become one? Usually, websites are static, they do not do much and they just point a user in a certain direction. For instance, a website can tell you a whole lot about a certain business and information on how to get started with it, it may take a step further and ask for your details via a form to be able to reach you but that is all right? How about if we want to be able to display a list of customers who have used a certain product over the last 3 months on the website? Of course, we can hard code it but you might be faced with the challenge of managing the code, updating it and as well as keeping a clean code. The good news is, there is a better way and that is keeping the information somewhere and calling it to display using the “fetch” method in the API. Of course, we know that API comes in different forms which include REST APIs and Third-Party APIs but “fetch” is the only method in connecting with the data needed.
Where Do We Start?
Now that we understand what this fetch API is used for we can go into writing code snippets. The fetch API can be used simply by calling the “fetch and then method” or “the async and await method”. So let's say we have a list of data that is to be displayed. As this is a hands-on project, please create a file called name people.json and copy the list below.
[
{
"id": "1",
"firstName": "John",
"lastName": "Doe"
},
{
"id": "2",
"firstName": "Mary",
"lastName": "Peterson"
},
{
"id": "3",
"firstName": "George",
"lastName": "Hansen"
}
]Using the fetch method is straightforward. For the project, since there isn't so much code to write, the code will be written in a .html file, please see the snippet below.
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body><!-- Data is displayed here --></body><script>displayJson(); //function call//function to display json datafunction displayJson() {//loop through json filefetch("people.json").then((response) => response.json()).then((data) => {let output = "";data.forEach((person) => { //the parameter is the person object used to get each property//this displays all the list of people we have in the json fileoutput += `<ul><li>${person.id}</li><li>${person.firstName}</li><li>${person.lastName}</li> `});document.body.innerHTML = output;});}</script></html>
Using the async also gives the same result
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body><!-- Data is displayed here --></body><script>displayPeople(); //function call//function to display json datafunction displayPeople() {//loop through json fileasync function getData() {const response = await fetch("people.json");const data = await response.json();return data;}getData().then((data) => {let theOutput = "";data.forEach((person) => {//the parameter is the person object used to get each property//this displays all the list of people we have in the json filetheOutput += `<ul><li>${person.id}</li><li>${person.firstName}</li><li>${person.lastName}</li> `;});document.body.innerHTML = theOutput;});}</script></html>
But what is the difference? Well, I found this. Try these snippets? Did they work? Let me know.
What is this about?
30daysofjavascript is a series of writing on how I learned to code in JavaScript. These episodes are as simplified as possible and for beginners like me, I hope you find JavaScript less confusing throughout this episode. Thank you as always and see you in the next episode. Check out every episode I have written here.
