Phase 1 Project — What the Fetch?
Wow! That’s all I can say right now. Looking back from four weeks ago, I’ve come a long way. I love my cohort, my instructor is awesome, and this journey is rocking and rolling. I thoroughly enjoy coding and the challenges that come with it. What I enjoy best, though, is that feeling when your work syncs together seamlessly and does exactly what it is supposed to.
Which is much easier said than done. There are things I know now being four weeks into the program that had I known previously, would have changed my approach. But, that’s in the past, and here I am now. Coding is brand new to me so I have to keep reminding myself that it is okay that I’m not as advanced as some of the others in the cohort. The most important thing is that each day, I’m improving. My understanding is deepening, my brain connections are firming up, and my confidence is growing.
That being said, this was a difficult first project. We were to build simple, one-page websites that include three JavaScript events and grab data from a database. This data grab is called fetch, and my first time running through it, I was lost. After seeing it in practice and attending the lecture over it, I started to come to better grasps with it. So let me tell you a thing or two about fetch…
First off, your dog will be disappointed. It doesn’t involve fuzzy tennis balls or going outside. It does, however, involve some play between servers, requests, and databases. Fetch is a built in function (also called a -method-) that is used to send network requests and return data, or to post data to a database. To call fetch, one must pass in the URL of the information you are wanting access to. After this, you have the option of passing in an option. If you don’t pass in an option, the fetch request will default to a GET request. This is what I used for my project, so it’s the part of the code I’m going to talk about in this post.
For my first JavaScript project, I created a webpage based on a trilogy of books I love and the characters therein. I created a JSON database with the three books and listed a few of the characters in each of them. I created a dropdown menu so once a book was selected, the JSON server would return the characters in that book. So my code looked sort of like this -
The above picture is similar to the database I built. It is an object holding an array of other objects. This is the information we want to access via fetch. Next we have the JavaScript code -
This code calls fetch and plugs in the url of the API you are using (in my case, it was JSON, so I copied in the local server I activated in the terminal to get JSON running). We can chain to fetch methods with .then, so here, we created and called resp to return resp.json. This reaches out and grabs the data object and holds it until we call for it in the next line. Here, we called .then(function(object) {console.log(object); }); to call for the data in the object we reached out and grabbed in JSON to log in our console.
This is just skimming the surface of the power of fetch. It can also post information to a database. It is a very powerful tool, but at first, it can definitely make you say, “What the fetch??”
