JSON Crash Course

hey guys it's been a while since I did a crash course and I realized that I didn't have an introduction to Jason on my channel and Jason is extremely important in web development especially if you're working with restful api s and sending data back and forth it's pretty much replaced XML in that area now I know a lot of you already understand Jason but I do have a bunch of subscribers that are just getting into JavaScript and programming in general so this is geared more towards more towards them but feel free to watch this as kind of a refresher all right so we're going to take a look at some slides and then we'll jump in and we'll start to work with JavaScript objects and Jason so what is Jason it stands for JavaScript object notation and it's essentially a lightweight data interchange format and it's used to send data back and forth to a server as text it's actually based on JavaScript object literals so if you use JavaScript in the past you may have worked with something that resembles Jason already if you've never written or even heard of Jason before I think after you watch this you'll be quite surprised at how easy it is to understand and read and write so as I said Jason has arguably replaced XML and it's often used with Ajax which is that which actually stands for asynchronous JavaScript and XML so it's a little ironic that Ajax now uses Jason more than it does XML which is actually in its name and if you don't know what Ajax is used for it's used to send data back and forth from client and server without having to refresh the page in a browser and later on I'm going to show you how we can make an AJAX request to a JSON file and output the content in the browser all right Jason can also be parsed with almost any modern programming language either natively or through libraries so even if you're not a JavaScript developer learning Jason is extremely relevant and I would also suggest that any programmer should learn JavaScript anyways all right so let's take a look at the different data types that can be used with Jason so we can use numbers just like regular JavaScript if we use a numeric with no quotes around it that'll be looked at as a number and there's no difference between decimals or floats or integers they're all looked at as numbers of course we have strings which is a string of unicode characters these must be wrapped in double quotes we can also use boolean values which are true and false we can use arrays which are ordered lists of zero or more values arrays are also wrapped in square brackets just like in regular JavaScript and just about any other programming language we can also embed child objects which are an unordered collection of key value pairs and we can have multi-tiered objects embedded in in the adjacent object and lastly we have null which is an empty value now when working with object literals we can use any standard JavaScript data type including functions and dates but if it's specified as jason values need to fit into one of these okay we do have super sets of jason such as Beeson which is used by MongoDB that can allowed they do allow additional data types but that's beyond this course alright so before we jump in and we start to write some JavaScript in Jason I want to just look at some of the rules that the syntax follows okay so Jason works by using key value pairs and in this example we have an object with one key value pair name is the key and Brad is the value all right now notice that both the key and the value are using double quotes if this was a JavaScript object literal we wouldn't need the quotes around the key just the string value but if we wanted this to be parsed as jason is valid jason then we need the double quotes around both the key and the value all right if it's if it's valid jason it also much must follow the specific data types that we just described now if you want you can create a file that is strictly for Jason it must be valid and it has to have a Jasin file extension and then the mime type associated with Jason is application slash Jason so if you are working with let's say a restful api that and you want to send Jason you can use this type in the header all right so let's take a look at a really simple example this is a single JSON object for a person it's wrapped in curly braces and uses the key value pairs the first pair which is the name uses a string as the value a string of Brad Travis E okay it must use double quotes and the second one is a number and notice that the number doesn't have quotes around it the next is an address which is actually an embedded object with a street and a city and then the last is an array of strings okay so this is a very simple example that uses multiple data types all right so that's a brief introduction to what Jason is now we're going to jump in and we're going to actually look at and write some code alright guys so I have an index.html file here that I just have in a folder called JSON sandbox and it just adds your basic HTML head and body tags and then we have this script to these script tags in the body this is where we're going to write our JavaScript so it's really important to understand that a JavaScript object and a JSON object are a little different and we went over some of this in the slides and you saw that Jason Newton with Jason you have to have double quotes around both the key and the value when you're working with standard JavaScript objects you usually don't but you can so what I'm going to do here is just create a variable called person and set that to an object which is represented with curly braces and in here we're going to say name and we're going to set that to a string called Brad okay so this is actually a JavaScript object this is not valid Jason so what we can do here is we can access I'm just going to use console.log you can use alert well actually you can't use alert because it's an object but what this will do is just log to the console down here if you're using Chrome hit f12 and that will open up the dev tools and you just want to go to the console Firefox also has it and I believe every browser does ok so what we want to do here is just log out person all right so if we reload this you'll see that it gives us an object and it has the key value pair name and Brad now this works in JavaScript in fact this is what you would do but this is not valid Jason if we go to Jason lint comm which is adjacent validator and we take actually let's just go ahead and put in here name Brad and we say validate Jason it's going to give us it's going to tell us that this is not valid and the reason for that is because it doesn't have double quotes around the D key so if we go ahead and do that and click validate it says valid Jason now we can in fact go over here and put double quotes like that and then if we go back and reload this is still going to work alright but I'm going to leave those quotes off now when we log this out it's it's logging out the object if we want to access a certain property such as name which is the only property it has then we can just do dot name and if we reload we get Brad we can add on to this and let's say age 35 and then down here we can say person dot age and that will give us 35 now when using JavaScript objects we can set the data type of the value to anything that we can do in JavaScript even a function so if we wanted to say email and set that to a function and then just return say Brad at gmail.com and then go down here and say person dot email which is a function so we need to put in our parentheses reload and we get Brad at Gmail alright and this is certainly not valid Jason although it is a valid JavaScript object so if we go over here and we try to do that let's say email email and we'll set that to function and we'll return Brad at Gmail and we try and run that of course that is not valid all right it has to be one of the data types that we specified in the slides which is number string boolean null and array and object okay it has to be one of those all right so I'm just going to take this this email off right here this function and I want to show you that we can prepare this as jason if we wanted to send it through Ajax to a server or do something that requires it to be valid Jason okay we can actually change it to adjacent string so to do that we can use a function called stringify so what I'll do here is just say person equals Jason dot stringify and then pass in that person object and then down here let's console.log person okay so we'll go back here and reload and now you can see it gives us a string that is formatted correctly it has quotes around the keys and around the string but not around the number okay so that's valid Jason we could send to a server now if you want to take this JSON string and turn it back to an object that's easy as well and you would do that because if we try to do person dot name and reload we're going to get undefined okay so what we want to do is parse it back into an object so for that we would use Jason dot parse okay and we'll pass in person and now if we reload we're able to get Brad okay it's back to an object all right so I'm just going to comment these out here and then I'm going to add some more stuff to this so let's say we want address and we'll set that to an object which will have a streak se5 main street which isn't my real address by the way and then city will say Boston alright in addition to that let's create an array say children set that to an array of strings and we have Breanna and Nicholas okay now if we wanted to access the street then we would have to do person dot address dot Street okay because it's another level in so we have to specify that we want to go into the address object and get this street property so let's reload and we get five Main Street all right now let's say we wanted to access Breanna in the children array for that we could do person dot children and since it's an array we're going to open up some brackets and say we want the first one which has an index of zero so if we reload that we get Breanna if we want Nicholas we can say one and we get Nicholas okay and if you know JavaScript then you know that arrays are zero based all right so what I want to do now is create an array of objects so I'm going to go down here and save our people and we're going to set this to an array and inside here we'll have some objects let's give the people a name and an age okay and then we'll put another one these should be separated by a comma this one will say name John age 440 okay and then we'll do one more we'll say name oops Sarah and we'll say age 25 so we have this array of people objects so if we wanted to access let's say John what we could do is we can say console.log oops people which is the name of the array and then we want to get the first one I'm sorry the index one because it's zero one two so we want John which is one let's go ahead and save that and reload and it gives us the whole object if we want to just the let's say the age we could say dot age and that will give us John's age now you may want to loop through an array and then do something with the output so for that what we would do is we could use a for loop I'm just going to comment that out we could use a for loop so we're going to say var I equals zero we're going to set I to zero by default and then we're going to say as long as I is less than people dot length so the length of the array which in this case is three and then we just want to say I plus plus because after each iteration we wanted to increment by one okay so all I'm going to do here is console dot log and we're going to say people and for the index we're going to use the current iteration which is the I variable all right so let's save that reload and you can see it goes through and outputs each object if we just wanted let's say the name we could do dot name reload and we could do age or whatever other properties there are alright now you may want to output these onto your screen and the browser in your application so if we wanted to do that we could go up into the HTML and let's create a ul we'll give it an ID of people and we're not going to put anything inside that's going to be generated through the JavaScript all right let me just comment that out and then we should be able to do what we'll do is set a variable of output and set that to nothing by default and then actually though that should be outside of this that should be here okay so we set the output to nothing and then each iteration we're going to take that output variable and we're going to append on to it so we're going to use plus equals and we want to append some Li tags and then in here we just want to concatenate and we want to put in yeah people let's do people I dot name okay so that's going to go through it's going to append to this output through every iteration and then after that what we want to do is say document dot get element by ID and we want to grab the element with the ID of people which is the UL we created and then we just want to say dot enter HTML and we're going to set that equal to the output okay and we'll reload and now you'll see that it's outputting on to the screen all right so now what we're going to do is we're going to create a JSON file and we're going to create a people array in JSON and then fetch that data through Ajax and then output it onto the screen so let's create a new file here and we're going to call this people dot jason ok now this has to be valid Jason so we're going to put in our curly braces and then we're going to set a key of people make sure you have double quotes around that and set that to an array okay and then what I'll do is go to this array we created and grab all these okay we'll paste that in and right away Adam knows that this isn't valid okay it's not valid because these keys do not have double quotes around them so let's go ahead and just change that all right so now that should be valid we can go ahead and check it if we want to copy that paste it in Jason lint and validate and you can see down here that is valid so let's save that and then back in our index file let's see I'm going to just comment everything out here and I'm just I'm keeping it so you guys have a reference to go back and check if you want all right but what we want to do now is send a get request to that people dot chase and file and once we get it we want to output the data now I'm going to open up see where is it I thought right here so this is the w3schools site which is an awesome site for a reference for all kinds of technologies but this is showing us how to make an HTTP request through JavaScript now this is much easier if you use jQuery or a library like Axios or something it's it's much fewer lines of code but I don't want to include any external library so we're just going to use JavaScript all right so let's grab this and we're going to put that here and I'll try to explain what's going on here so your browser has this XML HTTP request object so we're going to access that and put that into this variable all right then we're going to take that variable and we're going to say onreadystatechange equals a function and then we want to check for the ready state and the status ready state should be four which means that the response has been has been captured so we can use it and then status this is an HTTP status of 200 which means everything went okay all right and then once we get that we can then grab the response now down here we're going to say X HTTP or whatever you call this variable dot open and then say we want to make a get request to a specific file or a specific URL in this case we're just getting people the dot chasin okay and then we finally just want to call send so let's go back up here and I'm going to get rid of this for now and we want to console dot blog and we want to log the xh TTP dot response text because that's where the response is stored so let's go ahead and save that and go back to our application and reload and now it's telling us that the xhr cannot load because basically we're not using a host Ronna we're calling this from the file system we're not calling it from an actual domain and that's just a security protocol that chrome uses so what we want to do is we need some kind of server if you have would say xampp installed or something like that where you had you can use your localhost and you can just upload this to your web root then you could do that but another solution is to use nodejs and install a module called live server so I'm going to do that so I'm going to just open up I'll just use my standard Windows command prompt ok and then I'm just going to navigate to that folder which I think is in sandbox C CD Jason sandbox ok you want to go wherever you have this this index.html alright and then you need to have no js' installed so if you don't have that just go to node.js org go ahead and download it and install it just a simple windows install our same with mac if you're on linux you can use your package manager but once you get that installed you'll have a command called NPM and then what you want to do is say npm install - g live - server ok and that will install the live server module and it's installing it globally so that you can access it from n anywhere so now all we have to do to run this on our server is go to the correct folder and say live - server ok and that should open up your application on port 8080 okay so now we're running our index.html in a server so if we open up the console now you'll see that it's actually getting the data ok ignore this right here actually that go that should go away so we're now able to access this response so let's put this in a variable instead of just logging it will save our response equals that and then we can see that there is a key of called people which is an array so let's try to console.log response dot people now that's going to give us undefined and the reason for that is because this is formatted as a JSON string so it doesn't know what to do with this so what we need to do is just wrap the response in JSON dot parse okay once we do that it'll bring it to a JavaScript object which we can access like this so now you can see it gives us the people object all right now I want to do the same thing and just I'll put it up here so what we can do is grab this okay copy that comment this so let's paste it in and again we're creating a variable called output we're going to loop through people dot length now we haven't set people yet so what we want to do is actually we'll just do it here save our people equals the response that came in dot people okay so now we can just loop through it let's get rid of that we can add each person or each name the people array to the output and then we'll output it into the people the element that has the people ID so let's save that and now you'll see that we're getting this info from the people dot Jason file if we were to add another one let's say named Jeff and age 20 save that and you can see that that will get added since we're using live server which actually uses live reload I didn't even have to update it I didn't even have to refresh it alright so we're going to go ahead and stop here hopefully this gave you guys some insight into Jason JavaScript objects and Ajax alright so that's it and if you're not subscribed please do so if you like this also leave it a like dislike if you don't like it and I will see you next time

Channel: Traversy Media

Views: 1,010,087

Keywords: json, ajax, json ajax, json tutorial, javascript, javascript object, javascript json

Id: wI1CWzNtE-M

Length: 24min 49sec (1489 seconds)

Published: Wed Apr 05 2017

Reddit Comments

[u/YOUREABOT]

Great tutorial. Keep them coming!

[u/[deleted]]

I think this should be a short article on medium