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.

Then the “.then” and all that is the same as the GET method. we parse the response, then get the data, and do whatever we want to that data.

Ok, That's all.

I hoped you learn something. If you learned something let me know somewhere in the comments.

check out some javascript….

Javascript 1 (variables and data types)

Javascript 2 (numbers and strings)

Javascript 3 (bracket notation and 20 diff string methods)

Javascript 4 (functions and how they work)

Javascript 5 (hoisting, comparison operators, and if-else statements)

Javascript 6 (diff. Equal signs, null, and undefined)

Javascript 7 (logical operator, &&, || and ternary operators)

Javascript 8 (switch statements and arrays)

Javascript 9 (10 commonly used arrays in javascript)

Javascript 10 (8 different Math. methods And parseInt Usage)

Javascript 11 (for loops and nested for loops)

Javascript 12(while loops and for..in and for..of loops)

Javascript 13(8 diff array methods)

Javascript 14(objects and ways to use objects)

Javascript 15(JSON and fetch request)

Javascript 16(“this” keyword)

Javascript 17(strict mode and error handling)

Javascript 18(setInterval/setTimeout and Dates)

React info…

React part 1 (How to start a react app)

React part 2 (components and dynamic values)

React part 3 (Multiple components and small styling)

React part 4 (click events with functions and react dev tools)

React part 5 (link to: useState hook and how to output lists in react)

React part 6 (Props and reusable components)

React part 7 (passing functions as props and use effect hook)

React part 8 (continue with useEffect hook, dependencies with useEffect, and setting up the JSON server to fetch)

React part 9 (Fetching data with JSON)

React part 10 (loading bar and fetch errors)

React part 11(custom hooks)

React part 12(React Router Dom, Exact, and Links)

The Social Media…

Github

Instagram

Facebook

Linked-In

Medium

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Jonathan Bleibdrey

Jonathan Bleibdrey

Software engineer, Creator, Ball of Energy