Asynchronous JavaScript Tutorial #5 - Using JSON Data

Key Takeaways

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 apis 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-do's easily because as it is it would be really hard to count how many different to-do's 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-do's 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 adjacent 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 to do's 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 jason and notice we've got all these red squiggles everywhere that's because this is not valid and when we write jason 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 by some bread and the author is going to be mario and then the third text is gonna be do the plumbing and the author is gonna 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 do's dot json because we're in the same directory as the sandbox so now we're gonna go out and we're gonna 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