JavaScript Objects and JSON Data - REST API Testing Basics | Jason Myers | Skillshare

JavaScript Objects and JSON Data - REST API Testing Basics

Jason Myers, Sr Quality Assurance Engineer

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
10 Lessons (1h 1m)
    • 1. Introduction

      1:29
    • 2. Code editor

      2:32
    • 3. Running code in the browser

      1:05
    • 4. Datatypes

      10:39
    • 5. Variables

      14:48
    • 6. Arrays

      6:15
    • 7. Objects and JSON

      10:04
    • 8. Accessing object values

      9:11
    • 9. JSON validator

      3:14
    • 10. Project: Family Tree

      2:10

About This Class

In this course, you will learn the basics of what JavaScript objects are and how to work with JSON data. This introductory course is part of my "REST API Testing Basics" series.

No coding experience required.

I will cover the basic JavaScript concepts that you will need to know to start working with objects and JSON data.

What Do Students Learn In This Course?

Students will learn basic JavaScript concepts including:

  • Datatypes
  • Variables
  • Arrays
  • JavaScript objects
  • JSON data
  • Retrieving data from objects
  • Validating JSON

Course Prerequisites

  • Computer
  • Internet connection
  • Code editor or text editor

Target students

  • New to coding
  • New to JavaScript

Transcripts

1. Introduction: welcome to my course, JavaScript, objects and Jason Data in this course. What we're gonna go over is what is a javascript object? And what is Jason Data? So they're two very similar things which you will find out. But I will teach you everything that you need to know to kind of get started and get working with both objects and Jason data. So, in order to do so, I have to give you some foundational information. So what you're gonna learn is some basic Java script skills, so data types, variables raise, and then we're gonna get into objects in Jason. And after you learn how to create and read and understand what objects and, Jason, are you gonna learn how to use code to access the values, the properties that you are entering into your objects? Or Jason? The final project of this course, you will be using the information that you've learned so far to create your own Jason data , and it's gonna be kind of like a family tree of sorts. You can use your real family members or you can create your own. You can use superheroes or Harry Potter people, whatever you want. to do but kind of create the relationship. So we're gonna create properties for their names, their parents, their Children, their siblings. And you'll be able to share what you've learned. What the rest of the class. Okay, so I hope you take the course and you enjoy what you learn here. And I look forward to working with you in the future. 2. Code editor: in the videos. You'll see me using a editor for writing my code in before trying it out on the Web. And the editor that I'm using is called sublime text. You are free to use this tool of this editor. If you would like you're not required to, there's no requirement to do so in the class you condone. Use no pad or any any sort of kind of writing, writing simple writing applications. Don't want to use like Microsoft Word or anything fancy like that, because it it changes. Uh, what the characters are. So, for example, like thes ah, double quotes there actually, a different style lies kind of double quotes. So you don't want to use Microsoft Word or anything else that you can actually change the font style on eso no pad for Windows would were probably notes for Mac would be okay as an alternative. But if use the editor, then you will get the added benefit of kind of what we call syntax highlighting. So if I create so I have a tab here if I type something like BAR I equals one on and then I can do something like if, uh, one equals one and something like this. So you see how when I hit enter it automatically added, Ah, the opening and closing curly braces there, And it also automatically put my cursor at this indented point. So this helps you when you're writing code, because it automatically detects what you're trying to do here when you're writing code and it helps you out by by doing some stuff. So let me let me show you that one more time. So if I put the curly brace there and it creates the ending curly brace, which is required, and then if I hit the enter key, it automatically skips a line, puts my cursor to the tab. The first have position so you can see this is not a space. This is a tab, and then it puts the last curly brace exactly where it's supposed to go. So I highly recommend using editor. You can use visual studio code. You can use sublime texts but sublime Texas Mawr than enough for what you will need for this course. It's free and available on both Mac and Lennox so, or Mac and windows rather eso you can grab it, download it. Use it. If you don't want to use it, feel free to use whatever editor that you want. But this is the one that I will be using for this course. 3. Running code in the browser: and this course, I'm going to be using a simple webpage to run my code. Since JavaScript is a web based language that you can run your code in any browser, we can just use a simple browser or a website to run our code. So what I'm gonna going to use in this course is the website called Js consul dot com. So you can see the address here, and when you open it, it just looks like this. And basically, what you can do is you can just type in stuff and actually gives you responses based on what you did. Eso If I did something like Mara, I I equals one. And then I type I and hit enter. Then it. Then it gives me one, because that's the value that's in there on then another JavaScript command would be like counseled out log. Hello. And then it says hello to me. So this is actual code running in a browser, and this is where we are going to be using throughout this course. So go ahead and make a bookmark of this or just have it open and ready for as we go through the lessons 4. Datatypes: All right. So the first thing we're going to learn about his data types. So I have a sublime text window open here just so that I can type out a few things. But we will go back to the Js consul in the next lesson. But for now, we don't need it. You could just use a note pad or if you want to follow along and save this or, uh, you sublime text So data types. So there are many different kinds of data types, but we're just going to focus on the ones that we're gonna be paying attention to in this lesson. So 1st 1 is a string. So a string is text, all right. And to identify a string, it's going to be in in wrapped in either double quotes for single quotes and javascript. It doesn't matter what you use, but people will have their preferences, and it's better to be consistent about what you use. Great. The next one is going to be a bull more Boolean. So what a Boolean is is basically true or false. So you might say But these air just text right these air words, but notice that they're not wrapped with double culture single hosts. This is actually a true or false. So you can do something like one plus one equals two. And then you can say if if that equation is true, then do something, and if it's false, then do something else. So, uh, when you're evaluating something, you can figure out if it's true or false, and that's what a Boolean is for. All right, so the next one is and int or integer. So these are numbers so noticed that once again, this is text, right? But there's no quotes around here, so this is not a string. So what if I did something like this? Is this still a manager? This is no longer an injured. Now it is a string because it's wrapped around Ah, it has quotes wrapped around it. And it's really important that they're different because what you can do with them depends on the type of data that it is all right and go. We can kind of go into that later, and our next one is going to be array. So an array is basically a collection of things, right? So, um, an array is signified by these these square brackets. And what can go in and Ray basically anything so I can put a string in there And then if I want to put something else, you just have to put a comma. I can put numbers and I can put let's see a Boolean So true. All right, so string and injure 1,000,000,000. So all the data types that we've learned about before I can go into an array and then also the one that we haven't quite gotten to yet is is the object. So this can also go into the race, all right. And the last one we're going to notice here are mentioned here is an object. So an object is a little more complicated. Um, we'll get into this more and the lesson towards the end of the JavaScript, uh, section, but just kind of noticed that objects are wrapped in these quotes here, and they have two things. They have a key, and they have a value, all right. And that's it for now. So just you can keep note of this. Ah, save it. Or if whatever if you like, but you'll will continue using this. Ah, in the upcoming lessons in this lesson, we're gonna kick off the JavaScript section by learning about data types. So I'm open a tab here and sublime text, and you could follow along if you want. So data type is just kind of like the name implies. It's a type of data. So there's many different kinds of data types in JavaScript. We are going to just talk about the ones that we're gonna be using in this course. So let me start off. All right. So the 1st 1 is called a string so screwed a string is just text and to identify a string, it's either gonna have single quotes around it before double quotes. It doesn't matter in JavaScript, which you use, but people will have their preference. And there you should be consistent of your usage of single quotes or double quotes. You shouldn't just flop around all over the place with singles and doubles. All right. The next one is a number, so a number is just that. It's a number and example of a number would be 123 So you might look at this and say, Hey, isn't that just text? Ah, number is is just Ah, text that you type on your keyboard. Right? But notice what it doesn't have. It does not have the quotes around. So if I did this is this guy right here a number stuff. It is no longer number. It is now a strength. So you may find that confusing right now, but it matters, and I can give you examples of that in the upcoming lesson. But just remember that a number is not the same as a string and a string always has the quote surrender. All right, so the next one is called a bullion or bull. So this is basically in evaluation of true or false. So the possible values for bullion, our only true or false. And once again, this looks like text, not a string. So this is not really true or false As like the word this is representing a the evaluation of something. So if you had a problem where you said let me know if it's true that one plus one equals two that would evaluate to true and then you say, let me know if it's true that one plus one equals three that would evaluate to false. So just remember that this is not the text, true or false. And once again, if I do something like this, this true is wrapped in single quotes. So this is no longer an evaluation. This is just the text. True, since it's wrapped in the quotes. So if you want Julia, don't put quotes around it, all right? And the last thing we're gonna look at is an object. It's an object. It's kind of like a collection of things. It has properties that have keys and values. So write that down. So here's what an object looks like an object. The object always has this, uh, curly bracket around it, and then it's gonna have a key, and then it's gonna value. All right, let me break this out a little bit more. So key. Let me start. Give you an example of an object. So I like this name, Jason. And then favorite color blue. All right, so this is an object with two properties, one of my name with the value, and then one of my favorite color with about you. All right. So objects can get very large, so you can have an object that is hundreds of lines. If you want thousands of lines and it could, an object could have objects inside of them, and it can have the different data types inside of them. Also, see you can. The value doesn't always have to be a strain. It could be a number. It could be a Boolean. It could be an object, so these could get very complicated and we will go over this more in the actual object lesson of the course. But just keep in mind that this is very basic structure of what it looks like, and that object is also a data type. 5. Variables: All right, so in this lesson, we are going to learn about variables. So open up a browser and go to Js consul dot com And that's what I didn't do this. So variable is going to be in this, uh, format. So you're gonna have Teoh type the keyword bar V a r. And then a space and then the name of the variable. So that's just call this some number a space, and then an equal sign another space and then whatever you want your variable to be. So in this case, I'm just gonna put one, all right. And if you go in and hit enter, you have now declared a variable. So this here is called a variable declaration. So you've created it, its in memory now. So if you type in some number and hit, enter and you need to know that this is case sensitive. So some number and hit enter, you get the number one. So notice that when I typed it incorrectly, it says it is not defined. So that means you have not declared any variable with that name. All right, so let's let's take a couple of things out of this. So Number one. So notice how the name of my variable has this weird lower case uppercase thing going on with no spaces. So this is what is referred to as Camel case. So it is there for readability, and it is standard practice for for developers to use eso, for example. Let's create another variable. Let's call it. I really like she's all right. So that's a silly variable name, but it might be useful just for somebody. And I'm just gonna set this for Boolean, right? So this is gonna be a true So if you enter and then I really like cheese and then you get true. So notice that I really like cheese. That's pretty read readable. So what if I did something like I really like cheese? So notice that this one is a lot harder to read because it doesn't have the camel casing compared to this one, this one, it's very easy to see where the word the new word starts. All right? So, always, always, always use camel casing. If you're variable has multiple words. If you have a simple variable Um, just like X. Let's say we're doing math so X is fine. You don't You don't need toe worry about it. Or if it's a Simpson, uh, single word. It's called homework. So homework, Single word A. It's just going to lower case. So start with the lower case, and then the next word will be upper case. The next word, the upper case next word will be uppercase. So this is standard practice. All right, So what I'm gonna do is I'm gonna hit the reload page, so this is gonna basically wipe out all the memory. So if I type in some number again, it says it's not defined because we've cleared for memory. Alright. So, back to everywhere. So you know how to declare a variable. I kind of sprinkled in a few other things in there that you probably didn't know you could do. So this is also legal, so you can save bar, and then you can say, um, let's just call it X. So Bar X. So notice that I did not put the equal sign and I did not assign it value. So watch what happens when I hit Mix. It says undefined. So undefined means that it exists, but you have not given any value for it, so this is perfectly legal. So you can you can declare a variable without a value, or you can do like what we did before and do it all at once and say bar Y equals one. So now why has a value one? So what do we do with this variable X? How do we give this a value? So if I do this, is that gonna work? It does, technically, but this is not good practice, because this you're basically overriding the your re declaring the variable. And it's not a recommended thing to Dio. And a lot of languages will complain if you try to do that. All right, I'm gonna hit Refresh here. So let's start from scratch so far X and enter So X doesn't have a value, So I want to give extra value. So to do that, since it's already declared, you can simply say X equals one. Okay, And then now when I hit X, it now has a value. It is no longer undefined. All right, cool. So refresh against remember back to our data types, so variables can be in any of those data types of our let's see, some number equals one So it could be a number far some string strange equals Hello. Could be a string. And remember I said that the string can either be single Coats are double quotes so you can see. So I'm gonna take some string. Okay? Hello. And then another string and then notice that the return has double quotes. That's perfectly fine. It doesn't have to give you back single coats because, like I said, it doesn't matter. It just says that this is a string as compared to If I did some number and notice that this does not have quotes around it so you can easily see that these are strings. This is a number. All right. And then what else did we have? We had when you go back to our cheat sheet here? So we did string number When you do bullion so far some bull equals true. And then if I typed in some bull, then you get true. So once again, there are no quotes around it. So that is indeed a boolean. All right, And then the last one is an object. So bar some object equals Where's my bracket? There we go. Name the screen is bouncing a little place name and Jason. All right, enter and then you put in some object. And then now you can see that the object it tells you that it's an object. And then there's a name and the value of money. All right, so we have declared variables for every single one of the data types that we have used or that we have learned about in the previous lesson. All right, And then let me go and refresh here and let me show you the next thing about variable. So let's go ahead and do that. Variable X equals one again. All right, So what if I want that X to not equal one anymore? I wanted to equal to. So that's simple. All you have to do is say X equals two, and then when you type X now it's too. It is no longer one, all right, and you can keep on doing that forever so you can type X equals 100. So now the value of X is 100 so we can change the value of a variable very quickly and easily All right, Me? Try this here. If you do a colon clear, that clears it, etc. But excess. So they're alright. So that's just a little so n Js Consul, if you type in help Colin help. You could see there some some stuff here, Um, one that's probably useful the most is clear if you don't want to lose your stuff, but just kind of clear the screen. So when I wasn't clear, All right, so let me show you something that you can also do with variables, so X equals text. All right, so I'm going to set X equal to a string now, right? So if I type in X, you get text back, so it doesn't matter in javascript What the value of the variable is it will assign it to whatever you tell it to this is can be a very dangerous thing. So javascript is a language that is not strongly typed. So strongly typed means that in other languages you have to tell it what type of variable it is. You have to tell it that it's a string or a number or an object or whatever, and it can Onley be that unless you Unless you specifically tell it to change. All right. So just remember that you can change between data types and the variable, but it's usually not a good idea. All right, so let's see. I think that's all there is about variables. Um, that's let's do something fun here. So let me go ahead and refresh to clear the cache here. So, um, in the console, you can do simple things like Matt. So one plus one and it enter, and then you get the answer to two times two and so on. All right. So let us, too. Do some math here with the variable. So far, X equals one. All right, so we can do something like X plus one and hit. Enter. And then we have the answer to because the value of X equals one. So one plus one equals two so you can use your variable in place of something else. Which is the whole point of variables is is Teoh. Use it in place of something. So remember Matthew have to figure out what X was in this case. You already know what excess. Because you you declared it, but same kind of concept. Just little little backwards, All right. And let me show you another thing here. So let's do a string. All right, so that's created variable, um, greeting. And then that's gonna equal hello and then comma. And then you put your name. You can put Jason, or you can put your own name. Actually, let's do this. Hello. Let's just do hello comma space and that. All right, so it's type greeting, so make sure that we have it there, so hello. So we can do something called a concatenation. So concatenation is just a fancy word for saying you're taking a string and another string and combining those together all right, so we can do creating, and then it's going to kind of look like math. So greeting plus, uh and then my name and then it enter, and now you can see it says, Hello, Jason. It's all formatted out and notice that I did have to put a space here s O that is formatted correctly. Otherwise, it would say hello, common Jason without a new space. Okay, let's make this even better. So let's make a bar for name equals. And then the string for your name. Good and enter. So let's do creating plus name. Okay. And now we have the output of Hello, Jason. All right, so I'm gonna do one more thing here, So let's do a new variable, and then let's call this one. Welcome. And then this one is going to equal creating plus name. All right, So what I'm doing here is I am declaring a variable. And I am using two variables as as kind of like the data that goes inside of that variable . All right, so little a little more complicated, but kind of keep keep keep with me here. So this new variable, remember, variable is basically just a container for data, So this variable is here. So this variable right now has this string here. So hello, comma space. And then this one has Let's see this string here for my name, all right? And then we're gonna shove that into welcome. So go ahead and head, enter and then type. Welcome. And then now you have the value of Hello, Jason. So I have gone ahead and created a new variable that uses other variables to generate a greeting message. All right, 6. Arrays: All right, so we're gonna be talking about a raise and this lesson. So what we're going to do is we're gonna declaring array, so it's going to be in this format. So you knew variable than the name of their race. So let's do colors equals. And then array is signified by this square bracket here, so you can find this somewhere next to your the letter p close to your enter key, usually on the right on your right hand side. All right. So what goes into an array? You can put any of the data types that we've mentioned so far, so you can put numbers. You can put strings, you can put billions, and you could put objects in there. All right. So, like, before I could do something like this, which is just an empty array. So it's if you do colors and it says array with zero next to it. And then it shows the brackets with nothing. And so okay, And then I can also do something like, Oops, that's called us pizza toppings. Because all right, sausage, onions, quotes onions, and she is all right. Good hit. Enter, then when you type in pizza toppings. Thank you. You get They're rare back, and it says there's three things in their sausage, onions and cheese. All right, so this isn't Ray that has just strings in it on. And if you just type the name of their ray, it will give you the whole array back. But usually when you're dealing with the raise, you might not want the whole thing back. You just might want a specific one, right? So first thing to note, when you're counting thes things, there's a reference for each item, and it starts at zero. So this is item zero. This is item one, and this is item to So this array has three things in there. But when you're referencing them, this is 01 and two. So let me show an example. So, pizza toppings and then do you square bracket zero and then you get sausage. All right, Um and I don't know if you know, but if you had up arrow, you cannot get what you typed last again. So I'll do one. Okay, get onions and then to and get cheese on watch. What happens when I hit three. So undefined. So I tried to get an element out of their raid that does not exist. So it's undefined. So just like a variable that doesn't have a value, that array element does not have a value. All right, Okay, so let's create an array that's called stuff and of our stuff equals. And then I'm just gonna put different things in there. So I'm gonna put a one put text I'm gonna put true. Alright, Right. And then once again, if we want to get a specific one, this type of stuff and then zero and then you got your number, all right. A raise have built in methods that you can use to kind of manipulate and work with the data in their array. So method is just a piece of code that allows you to do a certain something, um, easily and kind of in a reasonable way. So, uh, the one I'm going to show you is called length. So to use that method are you to do is type the name of the race and then the name of the method. So stuff dot length gives you how many items are in the race. So there are 123 items in there, Ray. So don't get confused. Because, remember, this is element one or element zero element one an element to so elements only go up. The element index only goes up to two. But the number of items actually in here is 123 There's three items in here, so that is what the length is. Right? So you can do something like, Ah, remember how if we do stuff zero, you get the first item. So what if I want to get the last item in there? Ray and I don't know how many things are in their way so I could do something like this. Stuff dot length minus one. So the reason I have to do the minus one is remember the index 012 but the length is three . So you always have to do a minus one to get the last one. All right, enter. And I actually did the wrong. So what you need to do is do stuff, and then in these brackets stuff dot length minus one. Okay, so we're taking the stuff array, and then we're taking the value. So this guy right here So this is a method with some calculation in it that gives us a value. So this is actually going to return this. So when you do stuff and then put all this in there, this is actually gonna be replaced by two. So it's going to stuff, too, and show when I hit Enter. It should give us the value of truth, which is the last item in the rain, All right. 7. Objects and JSON: All right. So we're gonna wrap up this JavaScript section with some objects. So objects and this is also gonna be the Jason part of the section. So, Jason JavaScript object notation. Some people call it Jason. I like to call it Chase on because I don't like to feel like I'm saying my own name. And I encourage people not to use Jason because I think you're calling me all the time. So, um, but whatever you want to do is whatever you want to do. So let's go ahead and get started Here s o. I'm in sublime text. He remember we installed that thing called Pretty Jason. So right now I have empty tab right here. If I go ahead and hit, Validate says invalid. Jason. So the number one primary thing that Jason needs to have is this open and close curly brackets. So if I put that in there and do validate now it is ballot. So this object doesn't have any data in it, but it is valid. So sublime text auto formats stuff. So if you go and hit tab, it will start done some magic here so you can see it opened up. So I'm gonna go back to the first curly bracket here and put a space. And remember, before I said javascript doesn't matter for you single or double quotes now on for this and going forward, let's use double quotes. You might have seen me flipping back and forth in the previous lessons. Just that was just for for your educational purposes, to see that we can use both. And now on, I want you only to use the double quotes. All right, So Jason has two things in them. Other than the dope curly, curly brackets, You need a property which has a key in a value. So let's take this object as being a person. All right? So I'm gonna go ahead and hit. Enter here. That's format this correctly. So, um, first thing is, you have a first name. A person has a first name, so put double quotes around first name and then put a colon here on a space, and then you need the value. So the left side is the key. The right side is the value. The value for me is that so Your first name and then when we want to add another property, go in, hit a comma there and hit the enter key. And then let's do last name similar to the first. And I'm gonna go and put that in there. All right, that's at another one. So what do all people have? They have a hair color, and mine is kind of, I guess you can say black. It's kind of brownish black. I'll just go with black, all right? And then they have age on. And for my 36 actually, just let's make that number 36. All right? And then let's do what else I'm gonna make One that says has pets. Onda. This one is going to be what's making array out of this? Uh, let's change this. That's just called his pets, all right? And this is gonna have an array. So, um, dog and then fish. All right, so I got a dog and fish. Then what's missing here? So is married. There we go. And this one will be a 1,000,000,000. All right, so this object contains multiple properties. So has first name last name, hair color, age, pets and is married. And you can notice that the's are set the value for these are strings. We have a number here. We have a Boolean here, and then we have an array here with a couple strings in it and then the stew Control shift p and then validate once more. So Jason is valid. And then also, let's do this pretty print so you can see that it formats it for you. I recommend doing this so that it's consistent. Formatting noticed that it spread the array out. So that's kind of more easy to read, because a lot of times you're not gonna have, like, one liners here that are like three or four letters long it It could be like long things in there. So it's easier to read if it's not all on one line, because this array could have hundreds of things, and then it would just be going up the page, and that is hard to follow. So, um, this is it's let's go ahead and open a new tab here, and let's create another one so a raise can have arrays are objects, can have a raise in them. So let's go ahead and say, Let's just call this complicated complicated. All right, and then this can contain an object of is complicated. All right, that's going to validate that. So this is valid, so you can see that this is an object. And this object has a property that has an object inside of it. So, um, let's put some more stuff in there. Is fun. True. All right. So you can see this. Complicated, complicated spoke correctly. Complicated property has two properties within it, and you can kind of mix and mingle these things. Right. So I see, uh, pizza is yummy. All right? I'm just getting ridiculous because I can't think of examples. All right. And then that's format this guy, remember, The format also does the validate at the same time, so you don't have to do both. But so here's an object as a property Pizza's yummy, which is just a bullying, and then it has a property that has an object inside of it. All right. And then let me show you one more thing. So, going back to the 1st 1 that we did, we can actually have a raise of objects. All right, so let's make that's going. Just copy this copy, and then I'm going to do this on then create a You probably called people colon and then would've put rain here and then paste Conway paste. And then I'm going to beat this. All right, so let's go ahead and format that. All right, So we have an array. Are we have an object, rather. And it has a property, which is an odd is ah, is an array. So if you click here, you can see that this bracket and that bracket contains all of the stuff. So this array contains two objects. Uh, right now they're saying, but you can change this. All right. So you can see there's two different people in here, so you can see that objects can get quite complicated. Eso It's very important that you thoroughly understand the lessons that came before this, and then you kind of play around with this lesson. So I highly recommend going into sublime and just try toe, make up some objects for yourself just so that you understand the structure and how everything is supposed to supposed to be and use this handy, dandy validate and format so that you know how to make it look nice and also make it. Make sure it's correct, because that's your your check there. So here's some examples of things you could do. You can do like a great objects that has cars, and then cars can have different things. Right. Cars have make model color year all those types of things you can do that you can do. You can do pets, right? So type, age breed, etcetera. So think of different things in your day to day life that you can make an object out of and create them and just practice. So if you can do that and you can consistently make it so that when you do the validate, um, it returns with no errors, then I believe you would have a good handle on on the objects and how. And you would be very well prepared for reading the Jason Files in the upcoming lessons 8. Accessing object values: All right. So the last thing I wanted to show you about Jason and objects is how to access the values . So what we're gonna do is, uh, open your browser. Js Consul, if you don't already have it open and hopefully you are following along with the last lesson because we're gonna be using this data here that recreated. So if you don't have it, go ahead and positive you and copy this down. And once you're done with that, uh, continue. So I'm gonna change the second, um, people object so that they look a little bit different. Something changed age and change their hat. Just a cat. I think we need over its form in this. All right? Yes, you do. All right. So I'm just changing up the data. You can change it up to whatever you want it to be, but I just want to make sure that the first person in the second person is different, Okay? And we have this one also. Let me show you that so you can go ahead and copy that down. All right. Okay. So first thing I'm gonna do is let's go ahead and grab this object right in here. So don't grab the whole thing. Just grab, Grab the 1st 1 with with your your first name and last name. Or if you use my first name, last name, then do that one. So we're gonna create a variable so far? Ah, just cause me equals and then go ahead and pace that in there and hit. Enter. And then if you hit me, you can see that the object is there, so it's kind of hard to read like that. So if you click on object, it starts to format out. And then if you click array, you could see it so you can see all the information there and kind of note that it's no longer in the order that you put in, but it doesn't really matter. Um, which order it's and it's just, uh, looks like it did it alphabetically now. So All right, so this is how you get access to the whole object. But what if I just wanted to get the hair color? So what you do is you do the name of the object variable and then a dot and then the name of the property that you want the value for So Stuart, hair color. All right, goaded enter. And now you have black. All right, so the same thing Let's do, um, is married. So is married screen is bouncing again? Could it hit? Enter? And that's true. So I got the value back for hair color, and I got the value back for Is married. So let me go ahead and clear real quick. So I have some more real estate to work with. Then let's do me just so that I can see the object and expanded out there. All right, so next one we're gonna do is we're gonna try to get the value of the pets array. So me dot pets see what happens when we do that. So we got the whole array. So remember, this is the same thing that happened when we just did this kind of thing on the res. Listen, So same thing with objects. So if you look, if you try to access the Harper before the for something that isn't array, it's going to give you the whole right. But what if I want to know what is the first thing on the list so me dot pets, and hopefully you can guess this one since since what we did in the race lesson. So I want the first thing which is gonna be index zero up, and then it gives me dogs. He no longer giving me an array. It's just giving me the value that's inside of that array element. All right, Okay. So let's go ahead and refresh here and let's do another one. So go back to our thing over here. Let's start with this one. The pizza is the anyone so far that's called this random because that one was kind of random, then going paste. Okay, fig, and then go ahead and type random. All right, so here are random object, and then we have a property that has a Boolean, and then we have, ah, property that has an object. All right, So how do you think we are going to get to these values here? So you already know how to get to the pizzas. You anyone? So if we do, random dot pizza is yummy. You're gonna get true, right? So that's easy. But how do we get to that? Is complicated or is fun. So Let's try this. Random dot complicated. So what's that gonna do that's going to give you the whole object so you could see object? All right. And thats going clear some room here and then bring it back again. So let's do random dot complicated. So we know this gets us to the object, but then we want this. So I kind of give you a hint there, so we just need to do another dot and then is fun. Let's do that one. So true and then is complicated. It is true. And then if I tried something wrong, that is going to say I defined. So that's how you get to the object there. All right, so let's refresh one more time and let's go back to this one. So now this time, let's grab this guy. So this is gonna be our most complicated example. All right, so let's just call this person person. Sure. All right. Doesn't really matter. It doesn't really matter what we call it. Okay? Computers going crazy. All right. So gonna pay. Sit in and hit. Enter. So that's in there now. And what do we call this person? So you can see, that's there's an object with the property of people. That's a ray. The ray has two objects in it, and the object has stuff in it. All right, so let's start accessing stuff, so person dot people. So that's obviously going to give us this array, so you can see it gives the ray with two objects, All right? And then let's try to get the age. All right, So let's do person people bouncing everywhere, people. And so let's get their writ age for Joe. So remember, the 2nd 1 is actually array Index one and then do age. Okay, so we get his age as 12. All right, moving along here, so person dot people. All right, so for Joe, once again, let's get the pets right on, like we were expecting. That's going to give us the array. So his array only has one, but we don't want the ray of cats. We just want the value for the cat. So, person people one dot pets. Good. Put that quickly. It hurts, and we want item zero. Okay, so the first pet in there, and then we get the string of cat. All right, So, um just like before. I want you to practice this just so that you know how to access each element in their race . So in the previous lesson for the objects and Jason I give you I gave you an assignment to kind of practices. Create different array, are different objects with different properties and values and differences. Different hierarchies and all that stuff toe create stuff. Eso use what you created and put them into here and see if you can access the different values that you've created and defined. 9. JSON validator: All right. So the last thing we're gonna go over here is how to use a Jason on validator to make sure that the Jason Data that you have written is actually valid and that it's that it's good, Jason. So what we're gonna do is open up a browser and go to Js lint dot com and you should see a page just like this. And basically, what you do is you can either paste your Jason in here or you can type it manually. So I'll do something like this. So let's see. Let's do name on just like that. So very simple. And then you click this Js lint button and it says, Jason, Good, right. So what if I'm changed up a little bit? What if I forgot to put my double quote at the beginning of that, says Jason Lint was unable to finish because unclos string so you can see it gives you a hint of what happened. So it says unclos string because you have one part of it, but you don't have the other part of your your double quotes, right? So if I remove that and it says unexpected name because remember that Jason needs to be surrounded by quotes and it needs to be double quotes. So if I did like single goes here, let's see what errors we get now. So says unexpected something, right? So use double quotes, not single quotes. So it gives you very good instructions on what's going on with your Jason data and why it's wrong. And once you fix it, then it won't throw errors anymore. So there's a very good utility to use to make sure that your data is valid, because otherwise when you try to use it, it's not going to work, so you can see you fixed it all. Things were good. Another thing you can do is, uh, since a raise with objects Jason objects in them are valid because sometimes we wanna have things that look like this so, unfortunately, doesn't have a like the formatting, but when you paste it in and it should be formatted, so I would recommend not writing directly in here, but formatting it so is due to objects. So inside of this array, we have two objects, one with the name of Jason and another one with named Joe, and you can see that that is still a valid Jason. And it knows it's chase on right, because I think this could do other things like of our I. And then you can do that and you can say expected, said Michael and instead saw. And so, uh, it wanted it wanted this, right? So do some basic JavaScript validation to, but we're going to use it for is for our Jason validation. Use this as you go through different tutorials to make sure that your J. Sunday does is good, but most importantly, used this for your final project to make sure that your Jason data is valid before us posting it for the class to see. 10. Project: Family Tree: All right, guys. Congratulations on making this far in the course and for getting through all the informational videos. Now is your time to create a project of your own. So this project, I'm gonna call it a family tree. What we're gonna do is I want you to create a Jason representation of your family. So feel free to create a fake family. If you don't want to use your real family or you don't no are for whatever reason, you can use your real family if you know it and you want to, or you can use your you could use it. Use a fake family. Like I said, you can use like Harry Potter and blah, blah, blah, whatever, whatever makes you happy. All right. So things that need to be included. So properties that should be included for each person. So each person should have a first name and last name. So that's kind of like the bare minimum there. So you're identifying the people by their first and last name? Okay, Then you can add the following popularity properties as appropriate for each person. So we want to know their parents. We want another Children we want another siblings and for each of those people. So like parents, you would give a first and last name for one parent you would give first and last name for the other parent. Children would give a first and last name for each child siblings so forth and so on. And then you can make this as Bigas you want. So if you have a really big family and you want to map out everybody's parents and all their relationships between each each person gold head and do that or you can just kind of do it kind of your immediate family, you can say this is my spouse. This is my kids. This is you could do your dog. If you want. You can say pets, right? You can do your parents, grandparents whatever you want, so just kind of get creative with it and and do it. So make I recommend using the code editor to do this because it can get big really fast and , um, used the Jason validator before you post your answer to make sure that your chase on is valid and that everything should work. Best of luck to you. I'm sure you'll do. Great. Make sure you posted up there for others to see if you're your own family. I understand if you don't want to post it. But if you do like a fake family for fun, that would be great and awesome if you posted so other people can see. All right.