JavaScript Example- Rendering Some Data to the DOM with fetch()
This post is meant to be a simple, singular example of how you can start a project, pull some data from an API, and display it to the DOM using JavaScript. This sounds like, and is, a relatively simple task, but for the absolute beginner it can feel really powerful to start constructing your own projects, and the concept of integrating with an API is actually a pretty big deal! So, I’m going to take you through an example I built, pulling from a free API that has a bunch of facts about cats. Let’s dive in!
The Setup
The first thing we’ll do is to create two files inside of our project folder: index.html and index.js. Then, we’ll set up your main html page with some boilerplate code — if you’re using VSCode, you can type “! + tab” to get you started, then, you’ll want to link your HTML file to your JavaScript file with a script tag. You can also change the name of the APP in the <title> tag if you wish, but it’s not necessary for this exercise.
Next, we are going to create some tags in the body of the HTML where we can display the data that we’re going to be pulling from our API, and show the title of our page. So, in the body, let’s create an <h1> tag with the name of our app (I’m calling mine “Cat Facts”) and then below that, I’m creating a <div> with the id “fact-text.” This is all we’re going to do with the HTML file!
Filling in Index.js
Our Javascript file is going to have 3 main sections: an event listener to call our main function when the page loads, a function to fetch the actual data, and a function to render, or display, the data on the page. Let’s tackle these one-by-one!
At the very top of the JavaScript file, add the event listener for “DOMContentLoaded,” and at first, we’ll want to make sure that everything is working properly, so instead of calling our yet-be-written function to pull some data, we’ll just console.log some message, and then use our browser’s dev tool’s to make sure the message is, in fact, logged in our console. (Note- if you’re using VSCode, and you don’t know how to view the html page in the browser, you can simply drag the index.html file from your project window, into your browser’s address bar. Then, to open your brower’s develper tools to view the console, just right click or ctrl+click, and select ‘inspect.’)
Once we’ve got this working, it’s time to write the core of our project- the fetch call. W’ll write a function that pulls data from an API, and then calls another function which we will write momentarily to render that data. I’m going to name these two functions fetchCatFacts() & renderCatFact(), and I’ll be using the free cat fact database, catfact.ninja/facts. In the first example below, I’m using the fetch API to return a JSON promise, and then I’m using the data returned in a custom function to display it on our page. In the second example below, I have written our renderCatFact() function, which grabs the <div> that we created earlier by it’s ID, and then uses map to iterate through the data, creates a <p> tag for each, and sets the innerHTML of that p tag to be the specific piece of data we want to show. It’s important to visit the actual url of the api and see how the data is structured — for example, when I’m setting the innerHTML of the <p> tags to “fact.fact,” the first ‘fact’ is in effect, the placeholder argument that we created, but the second ‘fact’ is there because it’s the name of the element that we want to display from the API.
Now that we’ve got our two main functions written, it’s time to go bak up tot he top of the index.js file and call our fetchCatFacts() function on DOM load, and see our data appear in the browser. Exciting!
We did it!
If you’ve followed along, you should now have a web page that displays a bunch of cat facts that you’ve pulled from a remote database. That’s a pretty big deal, if you ask me. Thanks so much for following along, and if you want to have some more fun, try creating a css file in your app, linking to your HTML page, and exploring some fun styling!
