Fetch Requests Taught Me the Importance Of console.log()

Introduction

I am new to coding and I think one of the most important lessons I have learned so far, is that in order for me to truly learn and understand what I am coding, I need to physically see what my code is doing in the background.

Initially, I was just typing out what I thought was right in Visual Studio Code. I was running the tests, seeing them fail, and just trying to edit my code over and over until the tests finally passed. This meant I was coding without actually digging into why my code was wrong and checking what it was that my failing code was actually doing in the background.

So now, I am constantly placing console.log(s) throughout my code, and seeing what pops up in the console in dev tools. I also downloaded the Live Server extension so I can get immediate feedback.

I'm basically going on this rant because the reason I discovered that I needed this was through fetch requests. Even though I understood fetch requests, I could not wrap my head around how to get the data I was fetching to appear on the page. And the first thing that really helped me to understand this was to console.log() my fetch and see that data in the console, and then get it to appear on the page, and that is when it really clicked.

Background:

I think should probably explain what a fetch request is for the sake of this blog, so here you go:

Note: I recently was working on a project where I used the Studio Ghibli API to display a list of Studio Ghibli films in the browser, so I will be using references from this project.

The fetch() function in Javascript is used to make a request to the server to retrieve data and display that data in the browser.

It's a global method on the window object. That means you can use it simply by calling fetch() and passing in a path to a resource as an argument. The request can be used on any API that returns the data in either JSON or XML format.

When using a fetch request you only need one parameter, as opposed to other requests, because fetch defaults to send an HTTP GET request. Fetch instantaneously returns a promise object. The three promise object statuses are pending, fulfilled, and rejected. To use the data that is returned by the fetch(), and see it in the browser, we need to chain on the then() method which will keep fetching until the status of the request is "fulfilled". We can see what this looks like below:

Step 1:

function getFilms() {
fetch('https://ghibliapi.herokuapp.com/films')
  .then(res => res.json())
  .then(data => {
    console.log(data);
  })
}

Notice the console log! If you are coding along open up your file in the browser, open up dev tools, and take a look at what is being logged to the console. It's an array of 22 objects! For me seeing this is so satisfying. It's telling me I am doing the right thing, I am on right the path, and I actually know what I am doing. I think this is so important, especially when you are learning something new at a quick pace as a means to stop self doubt from taking over.

Here's what that data looks like in the console:

Step 2:

Ok great! So now that we have seen our data, we need to get our data on the page. In order to do this we need to decide where we want to attach our data to. For this project I had an ul in my index.html file (here's a snippet of that code for reference)

 <div id="main">
      <ul id="film-list"></ul>
      <div id="info"></div>
    </div>

and decided I would attach the films to the ul in order to have them display in the browser. But, in order to put them in the unordered list I need to create li's, iterate over the li's to attach each object in the array to, and ultimately display them in the browser.

function getFilms() {
  const ul = document.getElementById('film-list')
  fetch('https://ghibliapi.herokuapp.com/films')
  .then(res => res.json())
  .then(data => {
    data.forEach(film => {
      ul.innerHTML += `
      <li>${film.title}</li>
      `
    })
  })
}

Here's how they show up in the browser:

Conclusion

I'm sharing this because for whatever reason it took so long for me to realize how important something as simple as a console.log() is in regards to your learning. It can guide you on how and what to google if you're stuck while coding. Stick them throughout your code! I think its better that you have too many than not enough, and see if this helps show you more about what your code is doing than you understood before.