If you need to fetch something from an API that is inside of an object and display it on your website without any clicks as well and want to use just JavaScript and HTML then read on. If you are using something else (like package manager, build tools, framework, or static site generator) you can use this as an basis but the code may not be exactly what you need.
If you just want to get straight to the code then I posted the code on Github Gist. Otherwise you can read on which explains part of the code.
For this example, I’m going to use https://fakerapi.it, but you can use any API you want. The results for Faker API return an object, which not every API does (I would encourage you to test the API using something like CodePen before it goes to the live, public site).
You first need to create the page, if you are coding this then either use a template that you are given. If you don’t have a template consider using HTML5 Boilerplate.
After that, you will need a div where the results are going to be shown. For this example, the div is going to be named nameHere, so the code will be
<div id="nameHere"></div>
You can use any name for the div, but I thought nameHere made sense for what’s going to be shown there (people’s names). If you do change this name you will have to change it in at least one other place in the code.
Next, you want to tell the webpage you are now going to do JavaScript, it is most likely done by doing
<script>
at the beginning and
</script>
at the end. All the JavaScript will go between them.
Fetching the API is done based on how the API wants you to fetch it, you may be required to have a key or anything else required. For our example, no key is required.
fetch('https://fakerapi.it/api/v1/persons?_quantity=4')
You can change the number at the end to how many or few you want, but I figured 4 was a nice number to be able to clearly see it work.
You need to convert what you fetched to json, because what you get from the fetch is a HTTP response, not the actual JSON (according to MDN). The way to do that is
.then(response => response.json())
Now let’s understand what that does. The .then(italic) says after you have fetched then do this. In this case it’s to take the response (that you got from the fetch) and convert it to JSON. If you are interested in reading the details on this then MDN is a great resource for that.
Now I use a function after that, you may not need to use one but it helps to break it all up and make it readable. In this case the function is going to call the function called appendData, and it’s going to bring in dataIn. dataIn contains the JSON from the API.
.then(function (dataIn)
{
appendData(dataIn);
})
I will talk about the function a bit later as we aren’t finished with what is going to happen with the fetch.
To finish the fetch you can catch any errors that appear. That way if the API stops working, or you didn’t provide something needed in the fetch, it can let you know. The way you do that is with a .catch. Some say you can do this in one line using
.catch(error => console.log(error) );
For readability, I put it into it’s own function which brings in the error and that is run right then.
.catch (function (err)
{
console.log('Error: ' + err);
});
Notice the semicolon after the right bracket at the end? It tells the fetch that this is the last thing you want to do.
That part may be finished, but there still is the appendData function that needs to be coded. You can create that doing
function appendData(dataIn)
{
then I use a for loop to go through each of the items in the dataIn object. There are probably other ways to do this but I felt this is best for readability.
for (var i = 0; i != dataIn.total; i++)
{
document.getElementById("nameHere").innerHTML += 'Name is: ' + dataIn.data[i].firstname + ' ' + dataIn.data[i].lastname + '<br>';
}
}
Let me explain what it does. You need a variable to do the counting (which I set as i) which is set to 0 since JavaScript starts counting at 0. Then you need something that says once it’s false stop the for loop. In this case I’m saying once i is equal to the dataIn (remember from the second .then) then stop the for loop. And every time the for loop completes add 1 to i.
The (i)document.getElementById(“nameHere”).innerHTML(/i), says inside the html, look for an element that has the id of “nameHere”. At this point you may think to only have an equals sign then whatever text you want to show up, but since it’s in a for loop that would only show the last record (plus whatever text you want to show). If you do +=, it says to add the next text to the right of the text that was just placed. You can look up addition assignment if you are confused with my explanation.
Since the API is bring in names I thought it was appropriate to add something before the record is shown. In this case I have said show “Name is: “, did you notice the space after the colon? That is because you want there to be a space between the colon and the name from the API. If you don’t put it in there it doesn’t happen.
There is a plus equals sign between them because that is saying, in addition add this.
dataIn.data[i].firstname is saying that using the object (dataIn), use the number from the counting variable, and get firstname from the array (in this case it’s inside of an array called data, that is inside of the object) that resembles that counting number. For example, if the counting variable was 1 then it would grab the second array (inside of the object) and grab firstname to show.
What looks like two single quotes after the plus sign, is a space since there is a single space between those single quotes. Telling the page to add a space between firstname and lastname.
dataIn.data[i].lastname is very similar to dataIn.data[i].firstname, the difference is that it’s grabbing lastname.
Since multiple names are being shown it’s nice to space them out, you could put a couple of spaces between them, however to see them better I put each one on a new line.
We end this for loop using a semicolon.
You need to end the page, remember that </script>, and body, html, or anything else you need.
If you have any comments about my code, or want to fully see it again, it’s on Github Gist.
This explanation wouldn’t have been possible without many websites which helped me to understand how to do this, and what it all meant. EDUCBA and JavaScript Tutorial helped to understand the fetch API in general. Mark, Amirmohammad Moradi, Abubakkar, and Jonathan Lonowski on Stack Overflow for answers questions that were related to what I had thought of. MDN Web Docs for the numerous pages I read that helped me understand what I coded.
This is post number 71 as part of 100 Days To Offload.