JSON Tutorial For Beginners - Full Course

welcome to our JSON course so that's JavaScript object notation course my name is Lawrence and I'm so excited to have the opportunity to present this course to you today I've been a web developer for a number of years and working with JSON really gives us a great way to transmit and utilize data especially within JavaScript so JSON essentially is extended from JavaScript it's media types so the extension for it is JSON JSON it always starts and ends with curly brackets the names are separated with a colon and each name can have a pair value so this can be separated by a comma so the way that it looks is it's a key name value pairs so we've got our key name here and then we've got our value and notice as well that they are they do have the double quotes around it and if you've got multiple values you can separate them so comma separate them so we can have three different values within the JSON and we can also use arrays in here as well so that can notate that we've got multiple values contained within name there so that would be an array that's contained within an object so it does look very similar to JavaScript and JavaScript objects but there are some differences to keep in mind and we are going to be going over those within the upcoming lessons so basically it allows us to structure and organize our data it's ideal for web api's and actually most of the web api's nowadays are using JSON so it's a preferred method over XML whereas XML was a little bit more bulkier and Jason of course is easier to read and you when you're doing API requests and you're getting those API responses more than likely there's always a JSON option so this is just gives you a quick overview of the different data types that can be used within JSON and we are going to be reviewing those in the upcoming lesson as well and there's also various tools that we're going to be looking at such as JSON lint and that's going to give us the ability to lint and make the JSON a little bit more readable so when we do something like this where we out put this into the console you can see that this is similar to JavaScript we can also write it within strict JSON format where we've got the double quotes around that object information for those named paired values we're also going to look at how we can write out those JavaScript objects so we know within JavaScript objects when we create an object we can write it out with the dot notation or we can do the bracket notation so either way we get the same result and we can output that data so there's a number of different better ways to output that content so if we have multiple cars we can put them within a variable called cars and then we can contain them and that gives us the ability to extend on that and sometimes you will see that JSON does get fairly long so there is quite a bit of data that can be contained within there so that's why it's always good to think of structure how you're structuring that content that's presented within the JSON data so here's some more examples so JSON versus XML versus y8 ml so there are some differences Jason's the one here on the left hand side so this is one of the easiest ones to read write and use within JavaScript so there's are some differences of course between JavaScript so within JavaScript we don't need to have the quotes around it within json we need to have double quotes so javascript can be single or double quotes also we can't run any functions within json either so we're also going to be showing you some of the tools and resources online in order to use and work with json and then within the upcoming lessons are designed to get you to practice and work with json so we're gonna go over the different JavaScript datatypes we're gonna have got a number of exercises planned showing you how to stringify and parse JSON and bring it back into useable formats and then object formats also how that can be used within local storage so storing values into your local storage so you can see that we've got some values that are being stored within there we're also going to be showing you how to get content from online so that you can get JSON data for my JSON file and then output that within your JavaScript we're also gonna show you how you can use an API and get some random data output into your web application and then extend on that how we can pull a bunch of information and then this is all JSON formatted data it's a great place to practice and get more familiar with working with JSON so we're gonna show you how to connect to this API bring it into your JavaScript and then let you go through the data and output content into your web page and then lastly we're also going to show you how you can use your Google sheet and output content from your Google sheet into your web application so showing you how to do that and then even if you update your content within your Google spreadsheet you can see that this is being pulled directly from our Google spreadsheet so when we update it we update it as well within our web page so this is pulled in from a Web API essentially and it also gives you a great place to practice and become more familiar with working with JSON through using a Google spreadsheet and then you can easily access that data update it make changes to it and really challenge yourself to return that and retrieve that data back into your web content so all this and a whole lot more and of course source code is always included to get you started quickly and practicing working with JSON so when you're ready let's jump right in and begin welcome in in this lesson we're going to run through some of the resources we're gonna be using within the upcoming lessons so we're gonna be using an editor the editor that we're gonna be using within the course is called brackets and it gives us the ability to write our JSON code and then render it out within our browser the browser that we're gonna be using is Chrome there's also a few other tools that we are going to be looking at as well so if you are interested in using the same editor that I'm going to be using I'm gonna be using brackets available at brackets IO IO this is an Adobe product it's got a lot of really nice features and another feature one of the features that I'm going to be using is the live preview so that gives me the ability to kind generate this local machine address where I don't have to use the file protocol I can use the HTTP protocol so this is important when you're you working within browsers because you want to be able to render things out locally and within brackets this is built in so this is a really nice feature you could also run a local machine as well and of course because this is mainly gonna be JavaScript and HTML all you need is a browser in order to render it out and again I am using Chrome and one of the nice things about Chrome is it's got dev tools in order to open up the dev tools you can click anywhere on any website and go to inspect or you can go up here top right-hand corner where you've got the three dots here go to more tools and hit developer tools and there's also a shortcut as well with the command the shift command option and that will open up the developer tools so what you see when you open up developer tools you see that you've got all of the source code and any elements that you select here when you go inspect you can see it popping up here under the elements tab and predominantly the tab that we're gonna be spending most of the time on is in the console I usually close the doors so have a nice clean console and you can also clear out your console this way as well there are some defaults so again I usually default it to dock it to the right side you can also dock it to the bottom or a dock it to the left so depending on how much space I have I will dock it to the bottom on the split screens so that I'm not taking up the full screen and I don't have three different horizontal or vertical separations on the screen so another some of other resources that we're going to be using as well so there's Jason dot orgs it's got a lot of great information about JSON and it's got some diagrams how JSON works and we are going to be going through all of this within the upcoming lessons and as you can see JSON is used in a lot of languages so there's a ton of languages and this is JavaScript based just like the name implies when you look at the name JavaScript object notation similar to what you see with in JavaScript objects but there are some slight differences and we know within JavaScript objects we can have an object and we've got these pairs values we have a string and then we have a value attached to it we can also have a string have an array objects any one of these different data types and of course we are going to be looking at that later on as well there are some other resources that we're going to be using so my JSON comm gives us the ability to create a JSON file store it a line and then of course we can grab that within our code so show you how to do that as well there's JSON lint so there's a number of these available on line and this is a really good one because you can paste some JSON in there and you can see if it's valid so I've got this JSON generator that I've gone to so if I paste it in here I can go down here and I can validate JSON and I can see that this isn't valid JSON so it's got a string where it's undefined so we do need to take care of that and we need to fix that up if we want to have it as valid JSON and that's because we don't have the quotes around it so we are gonna be taking care of that and looking at that later on as well there's also this object generator so it gives us the ability to generate a JSON objects you see here on the left-hand side when we're defining it so we've got first-name and then we can enter in some values into it there so we can also do last name as well and just do an equal sign so on the left hand side is what you would typically see as you're able to read it and then on the right hand side is the JSON and as you can see as well JSON is human readable so it really makes sense and this is one of the reasons why everyone loves using JSON because you can clearly see what data is contained within here so we've got your first name your last name and of course if I take this and if I place it into the lint and I validate it we see that it is valid JSON so we've got the valid JSON over here so essentially this is what we're going to be showing you in the upcoming lessons and then of course within Wikipedia there's some even more information about JSON and there's some great examples here that we are going to be taking a closer look at in the upcoming lessons so having said all of this what I want you to do now is open up your editor and get ready to write some code we're gonna be starting off by looking at JavaScript objects and then seeing how they relate to JSON so all of this is still yet to come welcome back in in this lesson we are going to be writing some JavaScript looking at JavaScript objects and then we're gonna see how they differ from JSON data so first off let's start out by building up and creating our basic HTML page I've got an HTML template generator here so all I'm doing is setting up the HTML the head tags the body tags so that I can write some JavaScript so within here is where I'm going to write the JavaScript and we're just gonna do it within the HTML page also I'm gonna just change the title to JSON so let's go ahead and write some plain JavaScript so we know within JavaScript we can set up variables so we can have variables that are string values so they can be so we can have a type string we'll just call it t string so this is surrounded by double quotes or you could do T's string too and we could surround it by single quotes so we can set up variables within this way they can also be numbers as well so this is number notice there's no brackets around it boolean values so T boolean's this can either be true or false there's also nulls so it can also be null and variable can also be undefined so these are the court data types within JavaScript so if you go and if you refresh it and we go to inspect we're not going to throw any errors all we've done is we've logged different values and that we could actually access them as well directly in here so we can go to string we can see the value for T string T string 2 and so on it simply returns back the value and the reason I'm showing you these is because when we comes to JavaScript objects we've got the ability to do arrays so I'd call it t or rate they can contain strings in there they can contain numbers contain other arrays as well so you can have an array within an array and then this can have a number of different values and so on so you can do arrays within this type of format as well and all of these are just different ways to contain values so you see when you output it here within the console you can see that array within their array and so on another main way to hold data and hold content is using objects within JavaScript so objects look like this they've got the curly brackets and the difference between objects is that they're written with name value pairs that every value in here will have a corresponding value to it I can separate it out with the quotes so now when i refresh this T objects so now if we do T objects you can see that we've got our object there and notice the way that it's outputting it so it's not actually quoting around there even though I do have a quote in there there's different ways so duty objects too you can see it's still valid it still works within JavaScript we can also do multiple different ways so duty objects 3 and this time we can use the double quotes if we wanted to so again we'll just refresh that and you see it's still valid and still outputs the data you could also define an empty object so duty objects 4 and then you can place content within there if you wanted to just declare an empty object so it's just the curly brackets and then afterwards you can place data in there so you can do T objects for dot and then we can specify it with first and then we can equal it to Laurence again so the same thing same idea that we're still adding in data and information and we still get the same results so they're still all still equal and then you can also add values so we can do two et objects for and let's do lust within this type of format so you can also use the bracketed format so let's refresh one more time and we'll put the contents and you can see that we're still able to add in values so there's a number of ways to work with these values once they're within JavaScript and once they're within a way that we're holding all of these values and associating it with the variable and then all we'd need to do is reference the variable and we can get access to the information contained within that variable you also will see different combinations as well so you can have different combinations of T objects v where you might have an array so we'll call it my array and I'm gonna do this within an object format so this is gonna be an array within an object and you can link to the different variables so I'm gonna grab the one that I have here and let's refresh one more time so you can see that you've got there a contained within the object you can also add objects within objects as well so we can do T objects and let's do it within a different type of format so we'll call it my object let's go ahead and add in T objects for into there so we'll refresh it and five and now you can see that we've got an array we've got an object so we've got an array within our object we've got an object within our object and we can still reference these values if we wanted to so we could do T objects five and then within here we can access so if we want to get access to the my object value we can see that that outputs that there and then if we want to get the first name we can output it this way as well so as long as we have a way and a path to reference those values we can always get to those values contained within there so these are just different ways of storing information into our JavaScript variables and then accessing that information as well the more familiar you are with the different data types and how JavaScript can access data and how you can access the data that's deep with inside an object within an array the easier it is to be able to traverse through your JSON objects so I want you to try this out for yourself so go ahead and open up your editor or you can open up your browser and create an object so you can just do something like variable my object and create an object and then within my object you can add in content so you can do something like first so now you can see that within my object we've added and first you can also add in last as well and just get familiar with adding in content into JavaScript objects so try it out for yourself open up your editor or open up your browser dev tools and open up the console and try creating JavaScript object and then adding in first your first name your last name and then outputting that object so you could do it within the editor of course within the browser when you write this code and you refresh it it's going to be gone so it's only available in that instance if you want something more permanent then create it within your editor try it out for yourself and build out your JavaScript objects I know you're here for JSON so let's jump right into using JSON so in the previous lesson we looked at JavaScript object and we also saw that it's very similar to the way that JSON looks so if we create a variable let's call it my JSON and we can set it up as a JavaScript object and then within here if we have a name and make sure that you're double quoting around when you're writing JSON format so it's the same type of format where we've got a name and there's a value associated with it so the same way that we could get those JavaScript objects we can also get the JSON object so I just wanted to get the name I could do my JSON name using an object format and then we can return back the name I can also do it within this type of format as well where we could do the bracketed format and I can return back the name as well so these can be used interchangeably and the difference really here is that this way can be made more dynamic and I'll show you a little bit more about that coming up in the later lessons so let's open up our browser again where we had it before and we had all of the different Java JSON validators and let's take our JSON code and we should probably add in something else in here as well so because it's set of different paired values with comma separate them out so if we wanted to do something like age and I'm not gonna give you my real age but we'll just do 34 now so you can see that when I go back out here everything is still working the same way so if I return back that my JSON I can output it I can see the name I can see the age and have access to that data so let's try that out and add it into the validator so what do you think will happen here and I so I'm just gonna clear this out and I'm gonna copy and paste my JSON object and do you think it's going to be valid when I press validate JSON what do you think is gonna happen here and if you said it is valid JSON you are correct because the format that I was writing it within the JavaScript here we did make it a valid JSON object so if you take again that JavaScript object and this isn't gonna be JSON although it's gonna work within JavaScript it's not going to work within the JSON object so if I was to take something like this and copy and paste it in and validate JSON we see that this is no longer valid JSON because it's looking for those double quotes so if I do update it with double quotes but let's say I change these to single quotes what do you think valid JSON not valid JSON we know that it works within JavaScript and we see that this is not valid JSON so it's expecting a particular format and double quote single quotes are not interchangeable with in the JSON format so it needs to be double quotes and we also need to quote around the named value because within JavaScript we can have these names and we can use them interchangeably but if we will have a name and if we do something like first within JavaScript generally you're gonna shy away from doing it within this type of format because we can't have the spaces there but within json when we go over here we see it's still valid JSON so whereas if we left the space within JavaScript and we go back to our JavaScript object do you think we're gonna throw any errors when i refresh it and if you said no you're gonna be correct that we don't throw any errors and we can still reference this object but we always need to quote around it we can't do something like my JSON and then so it becomes really problematic like I can't do name space first because this just won't work in JavaScript there's a syntax error because it doesn't accept those spaces and the other thing too is when you're creating JavaScript objects you can't have them with a 1 in front or something like that so that also keep that in mind so usually the best way to do JSON as well is to try to keep it similar not use the spaces if you can avoid it if you really have to use them it's still going to be valid but it's just not good practice so the best thing to do is usually try to keep it similar to the way that you'd write it within JavaScript so do a camel case here where instead of the space you do an uppercase there's also other things as well within JavaScript that we can do so if we wanted to create an object business isn't going to be valid JSON if you do an object here and let's say within the object itself you had a function so this function so we know within JavaScript when I save that and if I go back out to here and let's go out and refresh we know that this is still valid this still works that I can run this as a function and it contains that function code but this for sure it's not going to work within JSON because again it's no JSON formatted that's what there's a few differences between JavaScript objects and JSON and this is definitely one of those and let's just make this a little bit bigger and then of course this if we want to turn it into an object format we need to do the brackets around there and I can do tests so now when we go out and if we refresh it if I do the line object dot test and I invoke the function we see that we're getting that value being returned back but of course still not a valid JSON object so now it's up to you so try this out for yourself create your own JSON object and then you can go into any one of my JSON or the JSON lint or any of the other ones that are available online and paste your JSON and try it just different formats of JSON and make sure that it's valid so they're able to write some valid JSON and you don't have to make it very complex you can just do just a simple name pair values so you have a name and a value name value comma separate them out and then just do the curly brackets around that object and I'll show you some more complex stuff coming up in upcoming lessons now that you're comfortable with writing JSON let me show you some of the really cool features when it comes to JavaScript and JSON content so if we create our JSON object and I'll call it my JSON and let's do something similar to what we had before and this time let's do first so do first name last name type thing and then comma separated it last then do the last name so just create a really simple JSON object and then within here we can see when we output it in to our console so if we do the my JSON we see that it's really nicely easily broken up so if we want to get to the my JSON and the first name we can do it this way and last name as well within that object format so we're all ready to go when we bring in a JSON formatted object but there are some cases where you might want to store it your JSON object in one variable such as if you're storing it to local storage then you do need to store it in as one variable and then save it as a named value because you can't go through all your JSON objects and save them separately not really good good idea so these are sway is two stringify it so when you take a JSON value and you string a fly it so we'll call it my JSON and we'll call it string a fight so I'm not sure that's a word but string a fide and we can do string of Phi with JavaScript and the way that we do stringify is we do JSON and this invokes the JSON method and then within here we've got one called stringify so we can convert a value to json optionally replacing values and basically we're string a fiying that json object and we can also parse it in so when we stringify it we take in that my JSON value and I'll show you what the difference here is going to be so when i refresh it we see that we still have the my JSON if want to output that and we also have the my json stringify version and if we output that we see that it's this is a little bit different so we're not actually seeing the first name the last name it's all quoted so this is the same as within just a write any string value this is a string value of the JSON object and the reason that we do this is because this allows us the ability to convert our object into a string value and then we can save it and send it to a server a web server and also we can store it into values where we need to use it as a string value and then to get it back into a usable format so you'll find sometimes with JSON it is within a string value so then you have to bring it out of that string value in in order to bring it out of the string value so do the same thing my JSON and we'll call it parsed so this one is using the JSON object again and parce transforms it back into an object so if I take that value so remember this is the string of fide version and if I place that in there and refresh now if I do the by json.stringify we're still stringify on this but if I do the my JSON parsed you can see that it's back within that usable format so you find this within applications that there are times that you want to stringify it and then if you've got a string version of a JSON object and you want to get it back into a usable format in JavaScript then you'll parse it back out so I want you to try the suit for yourself so take that JSON object that you created earlier stringify it using json stringify in your JavaScript code and then you can also access update it and so on and then once that's parsed it's back to stringify and then save it as a string of fight value again so let me show you an example of that so we see that we start out as a JavaScript object so this isn't a string of I'd version this is one that we can access and we can use and then when we get to the string of I'd version this is just one string value we parse it back out and now if we wanted to we could do that my json.parse value and we can update the first name and we'll change this to different first name and so now at this point if we were to console.log out our my json.parse value we're gonna see that it's within an object format and so we want to turn it back into a string of five version so let's to send our data so we'll call it send data and this is where we turn it back into a string of five version and we're going to take that my json.parse value and we're going to turn it back into a string version and then we'll log console.log out the string version let's try that out and I know that we kind of jump through a few hoops here but basically we start out with the my JSON version and that's not that output from there but we see that we turn it into a string of I'd version so we've got it as a string then we parse it back out into a usable format using the json.parse then we update the first name of it and we output the new version out within json parsed and then we create another instance of it and stringify it again and then this is the data that we're sending back to the server so also console.log out those other steps in between so now that we've got kind of a good example so we get rid of parse there and do this big long one my json stringify so that we can really see what's happening here so the data comes in and it's an object format we can make use of it to change it then we transform into a string value and then we take that string value and we parse it back into a usable format using JSON parse and then we turn it back we update it so that's our update there we had changed the first name and then we turn it back into string version so the idea here is that this is getting data working with it updating it and then getting it back to into our string version where we can send that data and store that data within the value so I'm going to show you a little bit more about that coming up later on where we're gonna store it into local storage but for now try this out for yourself try these methods the json stringify and the json.parse and get familiar with it and also try updating some stringify values and then parsing it and then updating it back into a string so switching it back and forth between that string value and the regular object format welcome back and I hope you had an opportunity to try it out so you're probably wondering well why do I need to have a string version and then parse it out why can't we just have it within an object format so let me give you an example so if you want to store it into your local storage you can't store it as an object format so it's showing you the way that that's gonna work let's first create some JavaScript here and we'll give it an ID and we'll just call it button and we'll say press me so when we press the button we want to store that content into local storage and also let's create an input field here and give it a type text and then we'll give it an ID as well so this is gonna be first name and then when we'll just leave that at that and then we're gonna set up when the page loads so we're gonna grab those values so let's add an event listener so we'll just out of that listener directly will get element by ID and then we're gonna grab the button add event listener and then listen that we're gonna add is a click so whenever it gets clicked add to storage and that's the function that we're going to invoke so next let's create our function so add to storage and then within this function so it's just first of all I usually like to make sure that things are working whenever I add these event listeners and it's always a good idea just to try it out for yourself just make sure that it is working so let's refresh and I know this doesn't really look like a button but it is working we're able to click it so that's exactly what we wanted to do so once it gets clicked then let's do a variable or do let so just do a temporary variable and let and Const give you more scope control over your variables so that's with es6 so let's do let and within let we're gonna do temp value so this is going to be the value of the first name and we using the document object you just got element by ID so first name so usually the easiest way to grab a value and then within here we're just going to output that value whenever it gets clicked so just make sure that we're able to pick up a value so it can do test and clicked so we're able to pick up those new values as they get updated so that's exactly what we want to do because we want to store it to local storage and then also let's add in one more button so we'll do an ad call it ad quick update and C button so this is ad button that's C button and the reason that I'm doing two buttons is because I want to have one button where we can actually see the contents of the local storage so let me make this a little bit bigger so we've got the two buttons and this one so this is going to be ad to storage and this C button is going to be the one that C storage or I could just call it video storage actually view is probably better it sounds a little bit better and we'll just keep it as C button just to keep things simple and then next so we need to have a way to see the contents of the storage so let's set that one up so that's another function and this one is going to be C storage so we don't need to get that value and we'll just get that clicked make sure that the clicked is working for that one as well so make this small again refresh our page and make sure that both of our buttons are working which they are perfect so next we're ready to build out the rest of this where we're gonna actually add and set values into our local storage and then we're also gonna retrieve those in that those values back got add to storage we've got the view storage so this is where we actually try to get content that's contained within the storage let's I put that content do another variable let and we can call it temp holder as well so this one is going to use local storage and it's going to get an item so we're gonna just have an item called tester so we're gonna grab the value of the item called tester and then we're gonna output that into our view area and right now we don't have anything within the local storage so we're actually not going to return anything back so let's do a quick refresh and I should update these as well so view storage and then we're just gonna do storage so refresh those so we've got our review storage and we've got add to storage so we've got null right now within the storage so now what we want to do instead of just logging it out we want to set it into the storage so let's set that up and we can do local storage set item and we need to set it by the same name that we're trying to retrieve by so tester and then the value that we're storing is temp value so we don't have an option here for a full object and that's an the interesting thing about it here is that we don't have that option and if we do try to store it as so try to put this JSON object in first and then we'll update that after and I'll just show you that it's not gonna work like this and that's one of the reasons so that's why this is a good example of why we want to have this storage within this type of format because it's with an object object so it's really hard to to grab that back in and then also make use of it because it's within an object format and if we do something like temp holder and do a refresh we see that it's just returning back object object so what we want to do ideally is this is where we want to turn it into and set it as a string of fied version so we want to get so if we want to use the my JSON object and we want to update this so if we have first-name and let's also say maybe we last name as well so yeah if you have something a little bit more complex and then we'll also do one for last name as well so just duplicate that out and then we're gonna turn it into an object last and then this is just getting whatever the value of last name is so let's turn that into an object so let's do let my object and then we gonna create our object and we're going to do it within a JSON format so we've got first and then equal that to temp first and then comma separated out so then next we've got last and equal that to temp last so we've got some values in there and now it's also console logged out so while we've got that object we can log that out and we can see what it looks like so I think we're ready so let's try that it and let's do test test for add to storage and we see that temp value of course not defined so and let's try that one more time so it's refresh so it's the first last name add to storage and again we're adding it within an object format so we're not able if we go to view we can't really easily see and view it even if I get rid of that clicked and we try to view it you're gonna see that it's still within this object format so we've got to break it out of the object format and ideally this is where we use the stringify in the parse in order to stringify it and place it within the local storage and then pull it out of the local storage and parse it so now it's up to you so I want you to try to set this up as well for yourself so set up a couple inputs add a few event listeners to couple buttons and then add in the content and set it up that you can stringify it before you set the item tester and then once you get the item tester within a string off ID format before you output it into the console output it and parse it using json.parse so try it out for yourself and I'll show you the solution coming up in the next lesson in the previous lesson we saw how we can use json.parse and json stringify in order to better handle objects turn them into strings and then take those strings and turn them back into objects and one of the cases that you might want to do this for is local storage because it's gonna save you a lot of trouble of setting up items when you can just do it as one kind of block string instead of having to convert it so we've got our object over here and we want to convert this object into a JSON format a string format and so we've got our my object here and we want to convert it so we've got a number of options where we can convert it so we can create another variable if we wanted to we could do json stringify and then just wrap around it so usually this is the way that I'll prefer to do that or you could do it when you're sending it within the local storage so these ones are both options that you can use so now when I add some content into here and if I do add to storage and if I view storage I've got my string value here just as what we saw earlier so I have access to it and I can use it and also let me let's clean up some of this code from before because we actually don't you need any of this stuff from before I'll get rid of this stuff down here as well so we're not outputting tons of stuff out into the console and let me clean this up one more time let's make it bigger and now we've we're storing it within a JSON format so we're outputting it with in JSON I'm gonna get rid of all of these console messages and we're just storing it to our local storage so next what we want to do when we view it from storage we want to output it into a usable format again and the way to do that is that we're gonna take that and we're gonna parse it back into our usable format so for now we're just going to do json.parse on the value so this is a string value remember within tester because we've converted our object into a string format so if we want to make useful of it one more time so let's do to storage and then would do view storage and you can see now if I want to I can manipulate the data I can make use of it and I can take that information and output it as well so there's one other thing that I want to quickly add and this is just kind of our way to hold the storage content so we've got our my JSON get rid of that and we'll use Const so this is going to be call it Const people and from here we want to do a json.parse of the local storage item so let's do our local storage and then to get item and the item that we're getting is tester so that when the page loads then we're actually gonna parse this through and we're gonna put it into our constant people so right now when the page loads people is going to actually contained the content from tester so let's show you how that works so if we go to load out the contents of people and let's refresh the page so remember this is getting it from the local storage because we've already deposited in there but let's say this is the first time it's loading and there's nothing in there for tester and we'll just rename tester to test or one so the first time that we load it we're actually not going to get any content so we want to fix that so we want the ability to actually be able to view content that's available within that within the people so we can do people and also let's add in the or so within first and then last and we'll also set that to none so this is just a default if we don't have any values that are loaded let's refresh and now this time we actually have content if we do view so let's fix up view to make sure that we always have something that we can load so instead a temp holder local storage get item move this one out so we're consistent if this one does exist then we'll just load whatever the contents of people are if they want to view the storage and then if it does exist so if we do view storage we're getting that content and now let's set something into storage remember we're setting it into tests or one so add to storage and now if I do view storage I've got the content in there if i refresh the page by default I've got the viewed storage so this is basically a good use case for why wait you would be using json.parse and json stringify and it's also good when you're depositing content into the database so go ahead and practice try this it for yourself adding in objects and also saving on to the local storage and then pulling it out of the local storage and then adding it into updating the local storage as well so try this out for yourself json is used everywhere on the web it's the most popular data format for exchanging data so in this lesson I'm going to show you how to connect to a file online that holds some JSON data and we saw earlier that one of the resources that I was recommending that's really nice to use is the my JSON so we see we've got our first name there and also let's actually put in our information that's contained here as well so we can put the first-name lastname maybe we'll just format it like this and then comma separated out I know this is super small but let's put that in and so we've got our first-name lastname comma separated see that and all I really wanted to do is to be able to get that JSON file so now when we output it we've got a file online so it's JSON it's Jesus it's valid JSON and we want to take this information and we want to use it within our JavaScript and it put it on our page so how do we do that so first of all I usually like to have a trigger or a button that gets the data so we can we'll just keep the Add button there and we'll get rid of the rest of this HTML so this will be get JSON so now our button is going to be called get JSON when we click it we want to invoke and we want to get the JSON in from so we'll just clean this up a little bit here and I'm gonna set up some values so do it Const make this bigger as well so this is gonna be my ad so this is ad button and we'll just grab that ad button I'm gonna break this apart because it's awfully long and then add button is gonna happen I'm handler so whenever that gets clicked then it's gonna be ad JSON and that's gonna be our function that gets invoked and let's set that up so ad JSON function so whenever that button gets clicked and again console.log and we'll just do clicked just to make sure it's working of course so let's minimize this and let's go back out to our JSON so it keeps that one open in the background there and we're gonna open up that get JSON so refresh so clicked is working so our click button is working although it doesn't look like a button you can obviously add styling if you want to make it look more like a button of course so next we've got a way to trigger off our JSON so at this point we want to also have another div here and maybe we can just call this one output so I'm keeping thing I'm trying to keep things super simple here so we're just doing IDs and then this one can be blank and then over here let's do output and then document and we could also use query selector for one or two so query selector and then because this is an ID of output make sure you have the hash that's the thing when you use query selector it's just like CSS gonna make sure you either do the hash or the dot for the classes or just by the tag itself so now we've got the outputs and we can do output inner HTML and let's do working and all caps working so we click the button and there's working so we're actually able to update our HTML whenever we invoke our content and we want to now we want to get that information that's contained within this JSON file and I'm gonna put it all on that same browser window there so that's our JSON object that we want to get from online and we want to output the first name and the last name into the output section so the next thing that we want to do is set up our fetch object so let's do a URL so the URL that we're fetching is gonna be this one here and fetch for those of you that aren't familiar so before with JavaScript we did xhr requests and then a lot of times Ajax was done with jQuery are there libraries and now fetch is really a great way to get that data and make use of that data so we just do the fetch and then in here let's do our URL so it's promised based and within then we're returning back a function so a lot of time we just call it a response so this is simply going into the function and then you can make use of that returned information within the function as needed so we've got our promise then you can also console log out information here as well so you could do a console log and you can get the response object now that we've got one and you can also get things like status if you want to let's see what happens so go back a refresh get JSON clicked and we're able to load so we see that we get our status of 200 so that means that worked we're returning back our JSON object so need to just cut transform that return content into a JSON format so we can do a return and the return can be the response text and then we do our next promise and this is where we actually output the content so let's do another function and then this one is gonna actually hold the data and we're going to also update this as well so this is again out here and then we can here we can console.log out the data that's being returned so let's take a closer look at that we get the JSON we see that it returns it back within a string format and of course now if we wanted to we could parse that data so it could do a console log as we saw earlier we can do a json.parse and take that data and parse it out so again try that one more time and we parse it and then we got it within a usable format but the nice thing about fetch is that it also has a built in way of returning back that JSON data so instead of response text we can do response JSON and that's gonna transform it into a JSON format and I'll show you we not gonna have to parse it anymore so there we go so we're able to automatically get it and return it back within a JSON format and of course we don't need this console log anymore and then at this point once we've got our JSON object now the next thing is the easy part it's simply outputting it into our output area so go ahead and try this out for yourself set up a function that's gonna fetch to the URL where your JSON data is located and then coming up next I'll show you how you can loop through that data and then output it in to your JavaScript and you're also welcome to try that out as well and I'll show you the solution coming up in the next lesson welcome back I hope you had an opportunity to try out fetch now in this lesson we want to output the results from the data and output it into our HTML and this is actually going to be a relatively easy because we saw in the earlier lesson that we're retrieving back the data it's already within a JSON format so a JavaScript object format so it's going to be really simple to grab and use so we've already hooked up our output so we need to just grab output we can do inner HTML and we're going to set the inner HTML of output so we can do first-name equals and now within data first we've got that object information and then last name equals and then add in at the data last name and of course we can get all of those values that are there so we can get age as well and any number of values that are contained within our JavaScript or JSON object so we could get age as well if we wanted to so let's try that out click and there we go so we've got first-name lastname being populated from this JSON file so it's as easy as that to make your Ajax request return back some content and then output that content into your HTML so we want to actually do something a little bit more complex coming up in the next lesson so the exercise is going to be using an API so random user M e is a great open source API and it's useful for generating a use user data so this is simply random user data these people don't actually exist while I'm sure they exist but not as they're represented here within the generator so this is a great way to get filler content if you want some user content and you can see that I've got results one I can also do results 10 and then right away this becomes a whole lot less readable and remember earlier where we could grab JSON data and we could use a resource like JSON lint we could paste it in there and check to see if it's valid JSON but we can also get in a more readable format and this is also really helpful when you have these JSON objects they're very complex they might have an object and then they've got an array within there and then they might have multiple results within that array so you need to be able to loop through that and output the content as needed and I'll show you all of that coming up in the next lesson where we're gonna first start out by retrieving back just the one user and then outputting it into our HTML and then we're gonna load several users ten users and also output that to our HTML and this could be a great practice exercise to get more familiar with JSON and how it works in JavaScript this lesson is gonna be a lot of fun and it's gonna be a great way to practice JSON especially when you have more complex JSON objects such as the one from a random user so we see we've got a lot of values in there and it's all contained within the results array so that's the one that we're gonna be first using when we retrieve back that data so let's go ahead and grab that URL and we'll make some quick updates to our code we'll keep the button so this is gonna trigger getting the JSON and maybe we'll do now get user so we're getting that user so that can all stay the same the output that one is fine as well we can get rid of the clicked because we no longer we know that it's working we can get rid of that as well and let's update our API so let's paste the URL we can get rid of this console will keep the console data because this is always a great way to kind of parse through your content and now let's try to let's see what data we're retrieving back from random user Emmie so it's refresh hit get user and see that we get this results so it's an array and this is where the main information is being kept so if we had multiple users so let's change that to 10 and it will go back to 1 just to try that out so at this time we have the results array has 10 items in there and we know that with Java Script we can really easily loop through arrays so I'll show you how to do that as well coming up so for now let's just work with the one result and let's go back in here and we see that we're returning back that one result so usually the way that I like to do it is I want to set a variable and I'm gonna just call it person so this is gonna contain all of the results or we can call it people so that when we're coming up and we're creating more we've got all of the results within people and then console.log instead of just console logging and the results will log out people so this is also gonna be a value that we're gonna be able to loop through so make that small again hit get user and there's our array of people so this one is going to be the first one we know we only have one so this actually makes it really easy to output that content so if we wanted to output the first name and last name of the user so we've got the first name last name so in this case it's named first last alright so just like you would with any JavaScript object you can traverse down so let me show you how we're gonna do that within the code so I've got it here on the left-hand side so people is equal to all of the results here and if we want to get the first result because it's an array we can do zero so let's try that so now we've got just the first person just the first object that's available in there so how do we get to name how do we get this name information and because now it's just a JavaScript object and we saw this earlier before where I can do name and refresh again and I can really zero in on that object that name object so now it's just a matter of doing first and last so first and if you also you can do it within that bracket format as well so you could do it within this way as well that's all valid it's a little bit usually I do prefer this object type format but again it's up to you so we've got our first and then our last so now when I go to the inner HTML so we can do first and we can do last so now we've got first name last name and every time we click it we get a different first name and last name and we can also style this a little bit better now as well so if wanted to do a new line so refresh so now we're getting random people first names and last names so it's as easy as that to work with an API all that information and use it within your JavaScript so now it's up to you so try the suit for yourself I grab the API so you can use the same one that I'm using within this lesson the random user dot M e /a P I and just grab one result or you don't need one by default it will just show you the one and then you can return that information back and then make use of it within your JavaScript code and coming up next I'll show you how we can handle ten results that's going to be even more interesting welcome back and I hope you had an opportunity to try out getting back some results from the API and right now in this lesson we're going to increase the results to ten and we're no longer gonna output it within our HTML because we've got some updates that we still have to do but we are going to put that value into the console log so we can see what's being returned back so when we click the button we see that we get an array being returned back so we want to use this array we want to iterate through all of the values within the array and then output it in to our output container and output it within our HTML so before that let's set up a quick little test and I want to show you how map works so we'll just call it test button and we'll call it test map so we'll have another button there that we can click and it'll do something within our JavaScript and this is just for testing purposes in order to demonstrate how maps are going to work so we call it test button and over here get element by ID test button and we're gonna call it test tester and then let's set up our function so this function is also called tester and this is what's gonna actually get initiated invoked whenever we click that second button so I like to again just make sure that things are working and we need to update the test button with sometimes when you copy and paste this type of thing happens so let's try that one more time so save that refresh it and this time we see that it's working that's exactly what we wanted and we want to actually test out how we can output content from an array so let's say for instance we have just a basic array so we'll call it temp array and we'll assign some values so these are just some random values so there we go so we've got some random values and then what we want to do with those values is we want to build out another array out of it so test temp array 2 and we're gonna take the values from the temp array we're gonna map them out into our function and then within this function we're gonna take the values and then we can do something with those values so for now let's just console.log out those values or actually what we're gonna do is we're gonna return something so we'll take Val we'll multiply it by 2 and then just down here below we'll console.log out the value that's contained within the temporary - so what do you think is gonna happen here when we click the button what's gonna be output here this is temporary - so it's taking all of the values of temporary one it's mapping them applying some functionality returning some values and then actually outputting it within our console so let's refresh and try that out so you see what happened here is that using map gave us the ability to iterate through all of the values within the array as we built out a brand new array and then within this brand new array we were just taking that initial value and we're multiplying it by 2 and that's how we constructed our brand new array so there's actually a great way to build out your HTML as well using the map function so let me show you how that works so we're gonna grab the value we can also get the index value if we wanted to so we'll just call it I 4 index and you can see that we can also add the index value to it if wanted to so that's going to be another value that's going to be contained within there and this actually gives you another option as well so now instead just being multiplied out we're also adding that initial value of I to it so the first iteration has value times 2 so it's 4 times 2 plus 0 and then we're doing 4/5 times 2 plus 1 and so on so you can see the pattern there that's being built out there so we're taking in those values and then we're utilizing them within our HTML so what I wanted to do instead is to actually build out our inner HTML so I'm going to return back a list item and then within this list item I can have some maybe some dynamic values so I'll have the value times 2 and then we're gonna close off those list items and then within here we're going to use this eye as well so just close this one off and we'll put an equal sign there and a plus so now we're building out some HTML so next step is to take our values that we're returning back so let's instead of temporary we'll call it HTML so build out an HTML value and right now when I go with the HTML you're gonna see that what's being logged out here is not it's still gonna be within an array format but we have a really quick way with JavaScript how we can take this array and we can actually convert it back into a string value so we can remove out all of the array functionality and we can do that with JavaScript join so what we're doing is we're simply joining together and outputting that joined value so let's try that one more time and refresh and now it looks like we do have some HTML within a string format so the next step is just to update our inner HTML and we can do that within this type of format so just do an unordered list and we're gonna add the HTML to it and then we're gonna do unclose off the unordered list and we'll do it like that so let's try this out one more time so refresh test map and you can see that we're outputting all of that content so all we have to do is still we still have to join it so we didn't actually output that joined value so let's take that value and instead of just doing the HTML let's join that together so we do the joint and refresh and try that one more time and there we've got our output so now the objective is to take what you've learned in this lesson about naps and apply that down here with similar to what the example is that we built out earlier and using that random user API value the results so remember it's returning back an array so you can take that array you can map it and you can return back you can format the HTML join it together and then output it within your output element and coming up next I'll show you the solution to this exercise in the previous lesson we saw how we can use map in order to take a value bunch of values from an array and output a brand new array and we also saw how we can join it together to create a string value and then use that string value within our inner HTML so we want to do the same thing for the results from random user Emmie API and we've already got the results back in a JSON format we already saw that we do have those results so we wanted to do something similar to what we did up here and that was the purpose of this exercise was to try this out using map in order to map out those values so we know that the data results that are coming in so this is gonna be an array and we're just simply taking that people array that we have so this is the existing array and then we're mapping out all of those values so we're taking the values and right now we know that from earlier we know that the people array is actually has some additional options here that we need to account for so we need to still build that out before we return back those values and this is where we need to do the name first as well so we've got our value and for now what I'm going to do is I'll console log it out so you can take a closer look at actually what we're seeing as we're logging it out all of these values but we're also going to be grabbing the name value for it so for now let's uh let's get rid of this and we're gonna return back just the index values and then we're gonna take all of those return to index values and we're gonna apply it to output so we're going to take that HTML join it together and we should have some type of output so let's try that out so get user so we get all of the index values from the user and you can see within the console log we're logging out all of this data so now this is the chance to try out and work with JSON again and go through this JSON object an array with the objects inside of it and pick out the information that you want to return back and in this case we want to do name first and last so now instead of we're just returning back the value we want to take that value and go name first just like what we did with in one of the earlier lessons and then output that instead so let's take value and then name first and we'll see what we get returned back so let's try that one more time go back out refresh it get user save refresh get user and we can see that we're getting all of these users names so we're getting the first names so now next step is to pick up the last names so similar to what we just did with the first names we can do the same thing literally for the last names as well so let's add that in its instead of name first it's just name last and we can also add in the index value so that will put the index value and it will also give you the first and last name and usually I like to start with one so let's add one to that index value so it's not starting at zero because we know with arrays the default value starts at zero so there we go so we've got a list of all the users and this is fully dynamic so if we're returning back 50 users we can see that we're getting 50 different names and results there so go ahead and try the suit for yourself and coming up next we'll get a tweak this solution also getting them into uppercase just using some JavaScript in order to accomplish that so we're gonna do some tweaks to our code that we're outputting so go ahead and try this out for yourself in the previous lesson we saw how we can grab some data from an API and then use it iterate through it and use it within our JavaScript and we can also make some updates to it so if we wanted to set our first name value and then take that first name that's being returned back there and we can add some JavaScript functionality so there's two upper case and let's turn that into a method and we're gonna do the same thing for last name as well so take the value and then again going down the object and taking that to uppercase and then instead of having it within the return string we can just pass in these new variables that we've just created with the JavaScript functionality so you can do quite a bit with the data that's contained within that returned response and then really make use of it the data and customize your code in order to output the data the way that you want it to be output so let's see what that looks like so let's refresh get user so now we're getting them all in uppercase and we see that it's all uppercase so ideally we want to capitalize this so I'll add in one more function in here and this is gonna be a string prototype so this gives you the ability to update the prototype for Strings so string prototype and let's create a brand new one we'll call it capitalize so that way whenever we render out capitalize what we're going to do is we're going to transform that string value to uppercase so do a return there and we'll take the this value and a take character at so we're going to take the first character and we're gonna bring that first character to upper case so just what we did earlier and then also take that and we're gonna slice it out one so return that back so now we can use capitalize instead of to uppercase so that will create a capitalized effect within JavaScript and this is how you can do some even more customizations so throwing that in and update that to capitalize as well so let's try that one out now as well so go back out refresh so now we've got that capitalized users and I think this is ideally what you want because their users names so you get the first name last name and you can also make use of the other data here as well that's contained so we see that we've got gender we can also output pictures if we wanted to so there's a lot of things that we can do there so lets coming up next we'll do some more tweaks to the code that we're outputting and we're gonna put some of the images as well so we'll really build out all of these elements that were outputting so some more tweaks coming up next and it is important to kind of play around with what you've got available within the API and see what data is being returned back and challenge yourself to access that data and then output it in different ways in different formats within your HTML so coming up next some more tweaks to the code in this lesson what to apply some more tweaks to the code so right now we're able to generate some random users and in this lesson we wanted to look at some additional data that we can pull back from our user so we've got the first name and last name that we've been working with and we've got an option to pull back images as well and we can also get additionally things like the email and so on so let's bring the image into this list item and we're gonna also restructure the way that we're building out our javascript in order to actually create some HTML nodes and then we're simply going to be returning this all back and also wanted to add in catch as well so catch gives us the ability to catch if there's if we're throwing any errors and usually we just do error so whatever error comes back and then we output the error within the console so we can see that if we are throwing any errors for whatever reason we can actually see them within the console so always a good idea when you're creating and using fetch that you do have the catch there as well so other thing that I want to add in so let's also let's just try that out just make sure that everything is still working properly which it is so we're good to go on and this lesson I also want to do a little bit more with the data that we're returning a back so what we've been doing right now we're just building building out a simple list item here and returning it back so what I wanted to do instead is that we've got this map functionality instead of mapping it to the HTML we want it to build it directly within the HTML so we don't want to have to use the HTML variable we simply want to just take that value and we want to return that back so we want to do a return on that so we want to incorporate all of that functionality here within what we're building out and we're no longer going to be joining it we're just going to be simply returning back all of that so what we want to do now we can we need to add to that output inner HTML all the list items and I can actually turn these into divs so they're gonna be a little bit different they're not going to be list items and now we need to grab that and to clean this up a little bit so way that this is going to work and if you look at the code there are some issues with this so let's let's try that out and then I'll explain how we can get around those so right now when I'm clicking it I'm only getting the last user because we're actually just overwriting that inner HTML that we have available within output so this is a really ideal and we need to find actually a better solution so we need to take that element and we need to append that element as a child so we want to actually create an element and let's do it within this type of format as well so we'll let div so these are all temporaries so every time it iterates through there it's gonna actually create an element and we'll use document and this is JavaScript so create element in case you want to add additional functionality into your elements so first of all let's create a div and we're also going to create an image as well because again we want to grab that image information so we're going to create an element and element that we're creating is going to be an image so creating an image creating a div and then we're gonna place the image widths inside the div and we're also gonna then place the div append it to output instead of doing the inner HTML we're gonna use append so it's going to be the difference here so let's take that new image that we created and let's apply a source to the image so we have a value of people and now we need to kind of go through what's being returned here so let's make this a little bit smaller and we can see that we want to actually get to the people the images that's contained within the people so how do you do that if we go down we see we've got all of this information we've got picture we've got large medium and thumbnail when what we want to do is we want to grab that thumbnail and place it as the image source so let's go down here as we loop through the array so we've got people and then pitcher and then we just select the picture that we want and we want to grab the thumbnail so that's going to be the small one we're gonna grab the thumbnail and then we're gonna take that value and we're gonna pend it into that div and we also want to create a span as well so let's do our span and document so again we need to do a create element and then we're just going to drop them one inside the other and then ultimately append that div to our output element so creating a span and then within the span I want to add in some innerhtml so within the span we're gonna have inner HTML and then this is where we're actually going to put the this information here so it can grab it I'll make it a little bit bigger so it's easier to read all we're doing is we reducing JavaScript appendchild and then we're going to be appending the div to that output element so all of the dips so next we need to place those values within the dips so let me move this stuff up as well so we want to place a few values and contain them within our div so let's take our div and we're going to use append child and the child that we're gonna append within the div so the first one is going to be the span so we'll pen dot and then we'll take div and we're gonna append another child into it and the other child that we're appending into it is the image and I just realized I use people here and I need to use the value instead of people because people is that full array so let's try that out again so get user and that way we can see that we're outputting all of the users profiles along with their pictures so these are again randomly generated and this is another way and probably a better way to output that content so every time we click get user we're getting a new set of users and we're continuously appending those new users so what we also want to do is every time it gets clicked what we want to do is clear out that output that inner HTML of output so let's do that as well so instead of we'll grab our output and inner HTML and we'll just equal that to be blank so that's two single quotes so that way it's gonna always overwrite because we see what's happening here is we're just constantly adding more users into our output HTML and we don't want to be doing that we want them refreshing and reloading kind of like this so perfect so this is exactly what we're going for and if you're welcome to style it even more and also take a look through what available content is available within the JSON object and outputs some different content within your webpage and try it out for yourself welcome back in in this lesson you're gonna need to have a Google account because we're gonna be using a spreadsheet so just a regular Google spreadsheet just gonna be creating one right now and this is just gonna be our testing JSON spreadsheet because in order to practice and test to make sure that you're become really familiar with JSON it's really nice to be able to create your own database objects and your JSON objects to use so we've got a couple fields that I'm entering in here so I've got actually four different ones here and I'm gonna make them a little bit bigger bold them so you can call them whatever you want and then I'm just gonna populate some values in here and of course obviously not my real email and then give an ID or whatever we want to call it so this is just to practice because what we want to do is we want to fetch the data that we've got contained within our Google spreadsheet and then output it within our application so when I'm make sure that we've got a nice sampling of some emails and some data there that we can add then output and I'll show you how to output it as well so we'll call it a Jane Doe Jane Doe or Jane Doe doesn't really matter so once you've got some data in there so this is just regular Google spreadsheet and you can actually publish it to the web and you can output it within a JSON format and we're gonna do this and then we're gonna grab the data and then output it within our website so in order to publish it to the web just go to file and click publish to the web and then this is going to give you an option here to publish to the web seek and publish the entire document or you can select one sheet and you've got some options here and we just want to stay with the webpage and then also there's some options here for published content and settings and so on so let's go ahead and publish so we're just publishing this and we've got the ability to share this so any one with this URL is going to be able to see that data and I'll shoot what that looks like so this isn't exactly what we want to use but we can see that that content gets output on to the web so in order to get it within a JSON format there's actually a URL for that and it requires you to copy out your spreadsheet ID so just grabbing that ID there and now let's go over to our editor so open that editor back up and we can clear out most of the stuff we have here and I'm also gonna minimize this one as well so go back out to our application that we're building and I'm gonna get rid of that the test map because we don't need to make use of that so I'll get rid of some of the code that's here we'll keep the output so that we can still make use of it I'll get rid of all of the test or stuff and we can get rid of the prototype probably not going to need it all so we're going to keep the output so we can output that content and we're going to update this URL and we're gonna fetch the URL so yeah we can clear out the output in our HTML so it's fine we can keep that we want to return it back within a JSON format and then we want to take that data and we're not going to have the same return results so first of all what we want to do is simply output it within our console so you can take a closer look and we can see actually what's happening with that data so we get rid of all of that stuff from the earlier lesson and we're simply going to just output it as JSON so just make sure things are still working so everything is still working with the previous API and now we're going to try to connect to the application that we just built so this is the URL to in order to do that so it can get rid of this as the URL so this is spread sheets dot google.com and then you need to /to feeds and then to list and then this is where you paste your spreadsheet ID so that's the ID as well or it could just do const ID to make it a little bit shorter so we can take that ID value and then just simply drop it into our string value there so that's gonna contain the ID value and then there's still a little bit more left to this string so forward slash so it's OD six and public basic with a question mark alt equals json so this should be able to output that content within a JSON format so let's try that out and we can see that we're actually getting something returned so that's good news of course and we can see that it's being returned back as JSON so now let's take a closer look at this and what I want you to do now as well if you do have a Google account then go ahead and open up the spreadsheet and output your content create some content within the spreadsheet and then take a closer look at that content and see what you want to output and I'll show you how to do that how to grab all the elements that are available there and then how you can output them within your web page so I'll show you that coming up next so for now just set up your Google spreadsheet and grab the JSON data that's being output for it we saw that we're able to return back a feed and if we actually change this to values we're gonna get a better JSON feed so let's try that out so right now this is the one that we're getting and we've got our feed here but we want to get all the data and all the information so it looks the same but now when you go into entry you can see that there's even more information and each one of these gsx so we've got email first name and ID and last name and they coincide with the values that we have here so there's email first name last name and ID so they're all represented within this gsx format so that means that now we can take that data and we can actually loop through it so let's navigate down through all of our JSON data that's coming again from our Google spreadsheet and instead of just data we're gonna do feed and then within the feed we want to grab the entry so this should produce our array of data that we want to make use of and we know that because we have three lines we get three options three being returned there so now if i refresh it I get four so each one of the lines here or the rows within my spreadsheet is going to be represented by another item within the array and we see that they're all formatted within the same way so that makes it really easy to grab that data and then make use of it and in this case we're just going to do a simple for loop so we're going to start out by letting X equal zero well set this up to our entry and then we're gonna loop while X is less than the length of entry so there's a number of ways to go through the data that's available and for now let's simply log out so we'll log out entry and get the value of x and then we're gonna add I dive deeper into getting that data so again refresh it because we only have the four there so what we want to do is we actually want to output this information into our HTML so we're going to do a really simple within this time where we're just going to simply grab all the items so let's do let and we'll do email and so email is going to equal entry and index value of X and then we can grab the value of it by using gsx and then grabbing that email object and then also we need to get the value of T because this is again an object within an object so a little bit tricky but of course great practice when you're trying to practice and use various JSON formats so let's see what happens so there we go we see we're able to output all of those emails and we can do the same thing for the other entries as well so we had our email and let's copy this out so we had our email and let's look at the other values that we had so we also had first-name we had lastname and we have ID so we know that it's all lowercase so we'll update this to be lowercase we'll update this just to be first-name so we can just call this first so we'll just keep it a little bit shorter here and then this is lost and then this is going to be lastname so let's try that one more time make sure we don't throw any errors so we're still outputting that information so now as we loop through let's do output innerhtml and we're just gonna add to it so let's build out our inner HTML and we have a number of options we can do it similar to how we did it last time as well so it's all up to you whatever method works best for you so I'm going to do a little bit of space I'll make this bigger so we can see the string as we're building it out so then this is going to contain the last name and I've spaced that out and then next let's do our email address and again just this is just spacing it out and of course you can style it probably way better than what I'm doing here and then we'll just close off that div so now I think we are ready to try this out and see what it looks like within our webpage so click and there we go so we get all of that data coming in you can update that data to be whatever you want and then every time you click it you get that newly updated data and this is also a great way just to become familiar with working with JSON outputting that data from your JSON and you can really easily update it you can add values so you could do a new value you and we can just call it test and and then add that one in as needed as well so go ahead and try this out for yourself and a great way to practice and become even more familiar with JSON in this lesson we're gonna do a quick overview of what we learned in what we saw in the earlier lessons so we started out by introducing how different data types behave within JavaScript and we know that with different data types we can mix and match them add them together and as we saw in the later part of the course sometimes those JSON objects can be fairly complex where there's an object and then there's an array within those objects and then there's also objects within that array and so on and so on it can go fairly deep so it's important to understand the basics where the different data types that are available and how we can access them and how they can all fit together one inside of the other and then if you want to retrieve back that information how you can navigate to get the values using the named value in order to retrieve back the value that you're looking for we also saw how we can use JSON and we can stringify JSON and then we can also output it back in to a usable format so this was taking it from an object format turning it into a string bring it back into an object making an update to it and then turning it back into a string so this is very useful and it's very important to again to understand this that this is all possible and there are use cases where you definitely need to turn those objects into strings and then of course if you've got a string to make it usable you can turn it back into an object and we saw how that works with local storage where we can add content into our local storage we can view our local storage and this is all done and accomplished using our stringify and the different methods to transform that content into a string version and then parse it back so we saw how that worked and we saw how we can output that information we could add it to storage and we can view what's in the storage and we also tweaked and set up some defaults so that if there's nothing in the storage that were just outputting none so we saw how that all fit together and the usefulness of making use of those javascript objects we also saw how we can connect to different api's and JSON objects on line so we created a bin in the my JSON bin and this was just a really simple JSON object that we had created and we posted that online and then we retrieved it on our local machine and output it within our web page and that was the objective to just become familiar that there's web api's and we can get content from those web api's next we looked at an API that had a bunch of information that it was returning back and then we made use of that information that was returned back we pulled out a first name and a last name and we updated this information that's coming from the API dynamically generated from the server and then we updated our HTML and we also saw how we can extend that functionality and how we can build out some really nice functionality doing that where we could build out using the map method and also we could retrieve back multiple results and then how we can navigate through those results and get access to the data that we're looking for so that particular value whatever you're looking for you should be comfortable enough and if you're not then always go back and practice with these various web api's in order to navigate through the different objects that are contained within the JavaScript arrays and output get to the various values that you're looking for so challenge yourself try to get back the state postal code coordinates login information and really navigate deep into the JSON API to try that out so we saw how that worked and we also added some tweaks and adjustments to bring in images and customize the output using some JavaScript functionality and this is where you can really see how JSON can make how you can make use of JSON data with your JavaScript where you can create things like various prototypes and then update that data as it comes in and then output it within different types of formats on your web page so we saw how that all fits together and then finally we also saw a great way to practice working with JSON where you can use your Google sheet you can output it publish it to the web and then that gives you the ability to access it using the spreadsheet google.com feeds list OD a public values and then alt API and we're able to retrieve back those that data we can also see that if we do if we simply go to the basic we get a basic feedback but it's not really ideal in order to output that data into our web page and that's why we needed to use values so we saw that in the last lesson where we're outputting those values and we're able to actually grab and navigate to the various columns and rows and output that data within our HTML page we also saw that there's a number of different great resources on line so going into JSON lint so this is a great way to lint your JSON to make sure that you've got some valid JSON and also making it more readable so when you've got a bunch of stuff there without any whitespace a little bit hard to read so these validators and linters are a great way to go there's also a JSON generator and then when you press generate you can see that this generates out a bunch of JSON data and there really is truly a lot of it so you then you could just put in the validator and and also get it more readable and you see that this is valid JSON so make sure that you generate it there's a number of different templates that you can use and this is another great way to practice and really get used to working with JSON you could also take this and post that into your JSON bin so you could go to the my JSON post it in there save it and then this will give you a URL to access a bunch of data online and then pulling it into your web pages and then there's also the output with the my JSON bins the way that they're gonna look so this one if we take this one and if we output it so this one's going to be way more complex and you can see that just as a string value it's not very readable so again bring it into the JSON lint to make it more readable so these were some great ways and this was another one the object generator gave you a quick and simple way to generate some JSON data and then you can use this to practice as well and make use of it within your JavaScript and the best way to learn of course is to practice so open up your editor and practice with the tools that we've presented within the course how to use JSON and bring it into your web pages

Channel: TechCode

Views: 18,620

Keywords: morioh, json tutorial, json tutorial for beginners, json crash course, json full course, learn json, learn json javascript, learn json from scratch, learn json online, json for beginners, tutorial, techcode, codequs, learning json with javascript, what is json, json python, json file, json web token, json schema, json api, json server, json explained, json vs xml, json course, learn json python, json data, json object, json javascript, json javascript tutorial, json php

Id: IWcUJLUAO2A

Length: 103min 18sec (6198 seconds)

Published: Sun Jul 28 2019