So how will we achieve this? First, we will fetch the JSON data by using the fetch API.
This will return a promise with our JSON data. Then we will append the data dynamically by creating HTML elements on the fly. We will then append our JSON data to those elements.
Fetching the JSON data
Getting JSON data from an API and display it on a web page is a common thing you will do quite often.
I have created similar posts on the big frameworks like React, Vue and Angular. Check it out if you are using any of those frameworks.
Let’s get started! First, create a people.json file and fill it with the following data:. We will save this file in the same directory as our index.html file.
- We will fetch this data by using the fetch API. We use the fetch API in the following way:.
- The url parameter used in the fetch function is where we get the JSON data.
This is often an http address. In our case it is just the filename people.json. We don’t have to drill down to any directory since the json file is in the same directory as ourindex.html.
The fetch function will return a promise. When the JSON data is fetched from the file, the then function will run with the JSON data in the response.
If anything goes wrong (like the JSON file cannot be found), the catch function will run.
Let us see how this will look in out example:. Here we are fetching our people.json file. After the file has been read from disk, we run the then function with the response as a parameter.
To get the JSON data from the response, we execute the json() function. The json() function also returns a promise. This is why we just return it and chain another then function.
In the second then function we get the actual JSON data as a parameter. This data looks just like the data in our JSON file.
Now we can take this data and display it on our HTML page. Notice that we are calling a function called appendData. This is where we create the code which will append the data to our page.
Notice that in our catch function, we are just writing the error message to out console. Normally you would display an error message to the user if something went wrong.
Displaying the JSON data
Before we display our JSON data on the webpage, let’s just see how the body of our index.html file looks like.
Pretty simple right? We have just a simple div with the id myData. Our plan is to fill our JSON data inside this div dynamically. There are several ways to display the data in our HTML.
We could create a table and make it look really good with nice styling. However, we will do this in a simple and ugly way.
We need this because we are going to fill the div with the people in our JSON file.
This is how we will do it:. We get the element by executing the getElementByID function. This will find the element with the id myData.
3.1 Explicitly posting JSON
Inside the for-loop we will append each person inside its own div. This code will be repeated three times for each person. First, we will create a new div element:.
4. Using a request object
Next we will fill that div with the full name from our JSON file. Lastly, we will append this div to our main container:. Now we have finished appending the JSON data to our index.html page.
The full appendData function looks like this:. When we run our index.html page, it will look something like this:. Not the most beautiful application, but it got the job done.
Try to copy and paste this in your own editor. As an exercise, you can try to style the output to look nicer.
Doesn’t modern web application use frameworks and libraries like Angular, ReactJS or VueJS? Well, yeah, you are probably right, most of the time. But some web pages are just static with very little logic.
If you just want to tweak some minor parts of the website, it might be overkill to include big libraries which will slow down the site.
Step 2 – Loop through every object in our JSON object
Quality posts into your inbox
Besides, frameworks and libraries come and go.
- So take every opportunity to learn it, you don’t know when you might need it.
- Just a bit of a random question regarding best practices.
- I am finishing making a website and and using a local JSON file to store data I need in one of the pages.
I have decided to keep the data in a separate JSON as it has the potential to become pretty big and I want to account for the future so it isn’t an issue for me or the next person who develops the project.