C(R)UD with fetch

Ali Shah
Ali Shah
Nov 1 · 3 min read

Fetch in JavaScript is a hard concept to grasp. But first, let’s understand what fetch is. The Fetch API provides a JavaScript interface. It lets us manipulating parts of the HTTP pipeline. “The response of a fetch() request is a Stream object, which means that when we call the JSON() method, a Promise is returned since the reading of the stream will happen asynchronously.” — Matt Gaunt. A Promise object represents a value that may not be available yet but will be resolved at some point in the future. So why do we use promise? or why do we need it? Promises give us the ability to write cleaner code but reducing/entirely removing call-back hell.

Call-back hell, otherwise known as the pyramid of doom. It consists of multiple nested call-backs which makes code hard to read and debug. So how do we overcome this problem? Use fetch!

So what is fetch? fetch() grabs the resources. But first, lets, learn some keywords about fetch. The method used to fetch a resource.HeadersRepresents response headers, allowing you to query them and take different actions depending on the results.RequestRepresents a resource request. Confusing right? Fetch is a tool to make/get AJAX requests. Let's see how to fetch.

returnValue = fetch("http://localhost:3000/toys")

the returnValue is the promise. On a promise, there is a method then. They then will return the response object. If you know Ruby, it kind of looks like a ruby hash. It's readable now.

but before I show you, let me show you the basic fetch syntax.

let returnValue = fetch("http://localhost:3000/toys")
returnValue.then((r) => r.json())
.then(response => {
// All your calculation goes here
})

These are the minimum requirements needed for fetch. in this case when you do console.log(response), you get an array object.

We can see what we’re getting from the http://localhost:3000/toys. Now we want to display what we got. If you know ruby, it looks like a hash. We need to get these elements and save them.

response.forEach(toy => {
let toyName = toy.name
let toyImg = toy.image
let toyLike = toy.likes

the response is an array and the forEach will go over the array and each element is called a toy.

let toyName is a variable and toy.name is the value assigned. So for the first example, toy.name is “Woody” and we are saving it in toyName. Now if we just want to display the `toy.Name`, we must grab the id/class name of where we want to post it. in our example, we need to post it in the div. We will grab the div by id.

let bigDiv = document.getElementById(“toy-collection”)
// now just append to that  // bigDiv.bigDiv.appane(toyName)

Now we can see the names!

let us add the images!

let toyName = toy.name
let toyImg = toy.image
let toyLike = toy.likes
let toyDiv = document.createElement("div")
let h2 = document.createElement("h2")
h2.innerText = (`${toyName}`)
button.innerText = (`Likes♥️`
p.innerText = (`${toyLike}`)
toyDiv.append(h2, img, p, button)
bigDiv.append(toyDiv)

This will output what you see on the left.

This is how to read with fetch. We have some data in the database. We’re taking that data and putting it on the dom. Also, check out Matt GauntIntroduction to fetch()https://developers.google.com/web/updates/2015/03/introduction-to-fetch.

Ali Shah

Written by

Ali Shah

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade