Transcript

          So hopefully by now you understand the basics of how to make Http requests.

Now I'd like to talk about Json, which is a data format that most API's return to us when we make a

request.

It's the kind of data we're getting back here.

This is all Json data.

It looks like an array with loads of JavaScript objects inside it, but it's not.

It's just a string.

The string is formatted in a way that looks like JavaScript objects with curly braces and key value

pairs, but it is still just a string and that's all Json essentially is.

Strings which look like JavaScript objects and it has to be a string because when a browser exchanges

data with a server, it has to be done in text format.

That is the format of data transfer and that is why we use this format Json.

So what we need to do is figure out a way of taking this Json string.

We get back and turning it into a real JavaScript object so that we can access all of the different

to Dos easily because as it is, it would be really hard to count how many different todos are in this

list and also to access the properties from each.

To do that kind of stuff is much easier if we have the to todos nicely packaged into objects in an array.

Now fortunately there is an object built into the JavaScript language which we can use to do this.

So let's go and try it out.

So when we get the data back over here, what we're going to do instead of passing the response text

is, first of all, we're going to take all that Json and turn it into a JavaScript array of objects.

So how do we get that?

Well, let's store this first of all in a const called Data, and I'm going to set this equal to Json

all in capitals.

So that's how we spell Json and it stands for JavaScript object notation because they look like objects.

So we use that object and then we use a method on this called pass.

So this method takes in a Json string.

And then what it does is convert that Json string into JavaScript objects that we can then use easily

in the code.

So what I'm going to do is take this response text, which is the Json string and I'm going to pass

it in here.

And now over here we're going to get an array of JavaScript objects because this takes the response

text, the Json string and it passes it into JavaScript objects.

So now I'm going to pass this through down here as an argument instead of the response text directly.

So now when we log it down here, it should actually be JavaScript objects, an array of them.

So let's save it and give this a whirl.

And now we can see we have this huge array.

It's no longer Json, it's an array with 200 elements.

Inside and inside are loads of different objects and we can see each object has all these different

properties, which we could then if we wanted to cycle through and access.

Now we're not going to do that yet, but we will explore how we do that kind of stuff later on.

So that's how we take a Json string that we receive back from some kind of server when we make a request

to an endpoint.

But we can also create our own Json as well.

So let me show you how we can do that.

So over in our text editor, I'm going to create a new file and I'm going to call this todos dot Json.

So when we make a Json file, it has a Json extension.

Now in here, remember the Json looks like an array of objects.

Now we don't have to put it in string syntax like this.

It's a Json file so it automatically knows it's going to be a Json string.

All we have to do is write it out.

So we have our array first of all, and inside are going to be different things that look like objects.

Now the difference between when we're writing Json objects and regular JavaScript objects is that all

of our keys have to go in double quotes.

And when we use a string as a value, they have to go in double quotes as well.

We can't use single quotes.

So whereas in a JavaScript object we could do something like this, the key would be text and the value

would be something like play Mario Kart, and then we could have a key which is author and that would

be Sean.

This is not valid Json.

And notice we've got all these red squiggles everywhere.

That's because this is not valid.

And when we write Json, everything has to be in double quotes.

So this has to be in a double quote.

And when we use a string as a value, that also has to be in a double quote.

So let's replace these right now and do the same for author and the value of author.

Now, if we were to use numbers as values, for example, if I did a points key and put that equal to

50, this 50 is fine.

Not going in double quotes.

We don't.

Have to do that only when we're using strings as values.

Likewise, if it was a boolean like true or false, we don't have to put those in double quotes either.

So let's just delete those for now and keep it simple with two different properties.

Now let's just add another couple of different Json objects.

These are comma separated, so I'm going to do a comma.

Then I'm just going to duplicate this and duplicate it again.

The last one doesn't have a comma though.

Then the text the second time around is going to be buy some bread and the author is going to be.

Mario.

And then the third text is going to be do the plumbing and the author is going to be Luigi.

Okay, so now we have this valid Json.

So if I save this now and come over to the sandbox instead of now reaching out and trying to get this,

what I could do if I wanted to is just try and grab this.

So I'm going to do the relative URL to get this, which is to dos dot Json because we're in the same

directory as the sandbox.

So now we're going to go out and we're going to try and reach this.

So if we save it now and refresh now we can see we get that data back as an array and JavaScript objects

because we pass that Json over here into that.

So whenever we make a request to some kind of endpoint and it's serving us back some Json data, essentially

what it's doing is on their server, it's getting some Json from somewhere like we've got Json from

here and it's just sending that Json back to us to the browser.

Then we can pass it into some kind of real data that we can use inside the JavaScript.

And that is the crux of Json.

It's a way of transferring data between server and client.