Mar 15, 2021

7 min read

Javascript part 15

Today we talk about JSON and how to use Fetch.

fun fact: you say JSON like “Jason.”

OK moving on, JSON stands for “javascript object notation” and is a syntax for storing and exchanging data. This is how it usually looks…

It looks very similar to a javascript object but, the keys are surrounded with double quotations. (basically, everything is a string and this is how you send information through the internet.)

JSON must be a string, a number, object, array, boolean or null. It CAN NOT be a date, a function, or undefined. That's really the only difference between JSON and javascript objects.

The benefits of using JSON is, when you create the JSON “object”, it is written like a text. JSON converts information and can send it straight to the server, without needing to change the format. (Since you can only send objects back and forth via a “string”.)

Two important methods when you use JSON:

stringify() = this converts any object into a string.

I used the MyJson variable from above. and used stingify on it and it turned everything into a string. We use this most of the time with fetch calls, APIs, and configs; before sending it off to the server or handling the data in some other way.

Next!

parse() = this converts a string JSON and turns it into an object.

if you look at the top, that's what our JSON looked like before we “parsed it. “ If we look further, we use the .parse() method on string variable. That turned our “string” into a real object. (Fancy I know)

Now on to “fetch” stuff!

Fetch

This is kinda important, we use fetch to get data from a server; it can be in the form of a GET, POST, PUT, DELETE. We are either asking for data, deleting data or updating the data in some way.

GET Method = It simply just “gets” data (aka a “GET” method).

We don't need to put GET anywhere since that is the default setting of the method. The first argument it takes in the fetch method Is usually the URL where all the data is coming from.

It does take in a second argument, which is usually used when trying to do anything besides the GET method.(That's where you put POST, DELETE, and PUT)

But for now, we'll keep it simple. Just remember we use the common fetch method with the URL, so you can get data from. (easy as that!)

Now explaining the inner working !

If we were to console.log() fetch above, we would get a “Promise ” returned. usually looking like this: Promise{<pending>}.

Which we have to do something with, which introduces us to our first “.then” method. The “.then” returns a response which is usually saying things like status: 200, header and body, etc.… we only care about the body since that's where all our data is stored to use.

But, here is a link to see what a response and how a response work.

Ok, moving on!

From there, The information is not actually usable from the response we just got returned to us. We have to use JSON method to parse it to a JSON object so we just use the “json()” method, as you can see above. (More info go here link to .json() )

lastly, we use another “.then” method, which will FINALLY return our actual data.

From there, we can do whatever we want with the data, like put in a variable, and ship it off to your code somewhere. (for our example, we just console.log() it.) Our data would return in arrays and look something like this:

Important note: Fetch will always succeed, so even if it doesn't have any data to get from the API. You would get a 404 error thrown at you but, it will still continue till completion.

Introduce the “.catch” Method, we through this at the end, to catch any errors that the fetch might have while trying to obtain your fetch call.

Moving on!

POST, DELETE, & PUT

Here we are using fetch again but, maybe we want to post, delete, or put data to the backend or an API.

Well, this is how we do it. (this will all work with put and delete as well; you will have to change small things, but the method value, will have to change to whatever method you're trying to do. Read more of the documentation here)

Let's start with the first part of this, We are fetching from the same URL as before, and the second argument in this fetch takes in the HTTP request we are doing.

If you look below, the “method” keyword, will be where yo put what kind of event is happening. So, either be a value of “POST,” “DELETE,” or “PUT.”(most of the time you wouldn't need to have a second argument with a fetch for a “GET” method)

The headers section, all that's doing Is saying what the content type we are sending or receiving from the server, THAT'S ALL! (I remember seeing all this and being like what!!!! There are other parts that go here, But it really is for a need to know bases so check them out here)

We move on to the body section of this, which is down below.

If we were to send an object with just a name and an email, it would give us an error. YOU CANT SEND OBJECTS OVER THE INTERNET! They have to be strings.

So JSON has a method for that, as we learned above. “Stringify ()”, we through some curly brackets on and put the object inside of that. It will finally send to the API, or wherever and we are all good.