1 00:00:00,150 --> 00:00:06,180 Within objects, just like arrays, you can hold string values, you can have no values, and you can 2 00:00:06,180 --> 00:00:07,980 also have boolean values. 3 00:00:08,340 --> 00:00:12,090 So Boolean values are the ones that can either be true or false. 4 00:00:12,120 --> 00:00:15,060 So that's the two values for the boolean value. 5 00:00:15,300 --> 00:00:17,160 And then those can be added in. 6 00:00:17,160 --> 00:00:23,410 And as well within the object you can have an array and the array can have multiple pieces of data. 7 00:00:23,700 --> 00:00:29,250 So if you want to extract the information contained within the object, you'd have to loop through the 8 00:00:29,430 --> 00:00:29,890 data. 9 00:00:30,060 --> 00:00:36,420 We saw that if we can select the main object and then the property name and that's going to return back 10 00:00:36,420 --> 00:00:37,240 the value. 11 00:00:37,590 --> 00:00:45,990 We also saw in the last lesson that we can output values within the dot notation as well as the bracket 12 00:00:45,990 --> 00:00:46,590 notation. 13 00:00:46,860 --> 00:00:51,000 And there's more information about this over at the Mozilla Developer Network. 14 00:00:51,300 --> 00:00:57,420 And also, if you are using the bracket notation, if you have an object within an object in order to 15 00:00:57,420 --> 00:01:01,230 return back that information, you could set it with the two property names. 16 00:01:01,620 --> 00:01:04,000 So let's provide one more example of that. 17 00:01:04,260 --> 00:01:09,240 So this is going to be an object and it will be just the courses. 18 00:01:09,720 --> 00:01:16,730 And then each one of the courses here is going to also be an object. 19 00:01:16,740 --> 00:01:20,800 So this can be the name of the course. 20 00:01:21,540 --> 00:01:28,620 So in order to return back the name JavaScript of the course and also let's add in some more. 21 00:01:29,710 --> 00:01:34,040 Values here, so just say length and 15 for the length. 22 00:01:34,390 --> 00:01:40,300 So if we wanted to return back the length of value, you can go ahead and pause the video and try out 23 00:01:40,300 --> 00:01:46,300 this example by returning back the value of the courses length and then I'll walk you through how to 24 00:01:46,300 --> 00:01:47,110 do that as well. 25 00:01:47,140 --> 00:01:54,730 So select the person, the object name and using the bracket notation, let's select the courses and 26 00:01:54,730 --> 00:01:56,740 that's going to return back that object. 27 00:01:57,040 --> 00:02:03,400 And then within the object that's contained within the object, let's return back the value of length 28 00:02:03,400 --> 00:02:04,660 and that's going to be 15. 29 00:02:04,930 --> 00:02:11,290 And we can also get the value for the property name of name and that's going to return back the course 30 00:02:11,290 --> 00:02:11,640 name. 31 00:02:12,040 --> 00:02:19,780 So also within here, you might also have multiple courses, so that would be an array and wrapping 32 00:02:19,780 --> 00:02:20,890 it within an array. 33 00:02:21,220 --> 00:02:29,020 Let's now return back that courses and because we have an array in here, this is going to represent 34 00:02:29,020 --> 00:02:31,390 an array of items. 35 00:02:33,410 --> 00:02:40,100 We can reference the index value of the item that we want to return back, and then also if we want 36 00:02:40,100 --> 00:02:43,590 to see the length, we can specify it that way. 37 00:02:43,970 --> 00:02:44,600 So these. 38 00:02:46,430 --> 00:02:52,100 Can get fairly lengthy, depending on how much data you've got within the object, and the nice thing 39 00:02:52,100 --> 00:03:00,200 about it is that if you have multiple items within an array, you can also if they they should be structured 40 00:03:00,200 --> 00:03:03,450 the same way so that it's easier to iterate through them. 41 00:03:03,770 --> 00:03:08,120 So let's go ahead and we're going to create and add in a few other courses. 42 00:03:08,480 --> 00:03:19,100 So there might be an HTML course and the length of the HTML might be 10 and the success course might 43 00:03:19,100 --> 00:03:21,050 be 20 in length. 44 00:03:21,560 --> 00:03:25,280 So now we've got a more a really fairly complex object. 45 00:03:25,670 --> 00:03:32,210 And usually if you do want to output the content, if you want to work with the courses, you can loop 46 00:03:32,210 --> 00:03:40,280 through and you can get the values of the contents of the course by specifying and creating a new variable 47 00:03:40,280 --> 00:03:42,300 name for the courses. 48 00:03:43,070 --> 00:03:45,860 So I'll just set that up and then selecting person. 49 00:03:48,650 --> 00:03:55,730 And courses that's going to turn back the courses within and courses object, and that will allow us 50 00:03:55,730 --> 00:04:03,950 to loop through the courses and return back each one of the courses you can use for each loop to loop 51 00:04:03,950 --> 00:04:04,450 through them. 52 00:04:04,820 --> 00:04:09,300 And then within the for each loop, we can specify a course name. 53 00:04:09,350 --> 00:04:14,030 We can also get the index value and using the arrow notation. 54 00:04:14,270 --> 00:04:20,210 And just as we would with any other array, we can loop through and we can get all of the course information. 55 00:04:20,450 --> 00:04:27,710 And then once the course information has been selected within a course variable name, you can output 56 00:04:27,710 --> 00:04:32,210 each one of the course values by using something like course name. 57 00:04:32,420 --> 00:04:40,190 And that will reference the current course name as it loops through in order to get the property values 58 00:04:40,190 --> 00:04:41,270 within an object. 59 00:04:41,600 --> 00:04:43,700 You can also create a loop for that. 60 00:04:43,970 --> 00:04:51,170 So looping through the property values and let's select the property and objects. 61 00:04:54,180 --> 00:05:03,990 And we need to specify the object, which is person, and will console out what we get back for property. 62 00:05:06,500 --> 00:05:15,890 So here we have a comment about these console messages so that as we loop through the object information, 63 00:05:15,900 --> 00:05:25,010 so the object, which is person where returning back each one of the property names as prop and logging 64 00:05:25,010 --> 00:05:32,210 it out into the console, and that's where we get the first name, last name x1 x2 interests and courses. 65 00:05:32,480 --> 00:05:39,170 And it doesn't indicate whether these are going to be arrays or other objects that are contained within 66 00:05:39,170 --> 00:05:39,410 there. 67 00:05:39,560 --> 00:05:46,220 It just returns back whatever the property name is, and then it's up to you to loop through and navigate 68 00:05:46,220 --> 00:05:50,120 through to that property name to find out what's contained within that property. 69 00:05:50,540 --> 00:05:56,150 You can also return back the keys of an object. 70 00:05:56,480 --> 00:06:05,450 So if you just wanted to get the key values of an object, so let's use the object and look for keys 71 00:06:05,450 --> 00:06:06,410 within the object. 72 00:06:08,730 --> 00:06:18,810 And then within the parameters, specify the object and then you can log out keys in order to see all 73 00:06:18,810 --> 00:06:24,660 of the keys of that current object, and that's going to be created and added into an array. 74 00:06:24,900 --> 00:06:31,200 And then within this array, then you could loop through keys and use for each to loop through each 75 00:06:31,200 --> 00:06:33,930 one and return back each one of the keys. 76 00:06:38,190 --> 00:06:39,300 And in this case. 77 00:06:41,730 --> 00:06:42,990 You can select person. 78 00:06:44,030 --> 00:06:49,910 Key, and that will loop through each one of the keys that are contained within the object. 79 00:06:51,770 --> 00:06:58,910 And output the response here, so we've got Lawrence Sparkasse, so one, two, so it's OK putting them 80 00:06:58,910 --> 00:07:04,730 all according to the Keys, and then when it gets to the array within there and outputs that and then 81 00:07:04,730 --> 00:07:10,730 the object that's contained within there as well, if you want to get the values, you can do a very 82 00:07:10,730 --> 00:07:16,460 similar thing as we did with the Keys, where you can output the values of the object. 83 00:07:16,790 --> 00:07:26,360 And instead of using keys, let's output the values of person and then log out whatever we've got for 84 00:07:26,360 --> 00:07:26,990 values. 85 00:07:27,290 --> 00:07:34,550 And I'll commentates the other console messages so that we're only returning back an array of whatever 86 00:07:34,550 --> 00:07:36,410 the values are within each one. 87 00:07:37,010 --> 00:07:43,430 So this is a way that you can access the values easily that are contained within the object and put 88 00:07:43,440 --> 00:07:44,600 it within an array. 89 00:07:44,780 --> 00:07:50,810 And then the same thing that we saw with the keys, you could iterate through each one of the values 90 00:07:50,810 --> 00:07:59,750 because now it's within an array and output the value into the console or do any other type of calculations 91 00:07:59,750 --> 00:08:00,410 that you want to do. 92 00:08:01,010 --> 00:08:06,110 So this is actually just returning back the values so we don't have to reference the object and just 93 00:08:06,260 --> 00:08:07,730 putting each one of the values. 94 00:08:07,970 --> 00:08:10,360 So it's actually separated out from the object. 95 00:08:10,910 --> 00:08:16,790 You can also get the entity entries that are within each one of the object items. 96 00:08:21,520 --> 00:08:29,470 And let's create another variable, and this one, instead of values, is going to be object entries 97 00:08:30,010 --> 00:08:36,430 and specify the object name there and that's the object that we're looking for and then output the entries 98 00:08:37,510 --> 00:08:41,410 and let's put that to the console comment to the other ones. 99 00:08:42,580 --> 00:08:49,270 So this way, what it does is it constructs an array of all of the properties that are within the object 100 00:08:49,480 --> 00:08:57,880 and provides the property name as the first item within the index of the array and then the property 101 00:08:57,880 --> 00:08:59,440 value as the second item. 102 00:09:00,340 --> 00:09:04,450 And then that goes for all of the items that are within that array. 103 00:09:04,930 --> 00:09:11,380 So once you've converted an object into an array, so either using the keys values or entries so you 104 00:09:11,380 --> 00:09:14,390 can loop through it just as it would be a normal array. 105 00:09:14,740 --> 00:09:20,450 So we saw that you can use the for each to loop through the array and then there's also a similar loop. 106 00:09:20,480 --> 00:09:26,140 There's the for loop, which is similar to the one that we used to loop through the properties with 107 00:09:26,140 --> 00:09:30,370 an object, and you can loop through it that way as well using the for loop. 108 00:09:31,300 --> 00:09:37,060 So let's take the key value and actually just call it the array. 109 00:09:38,700 --> 00:09:40,920 Of entries. 110 00:09:43,410 --> 00:09:52,800 And this will loop through each one of the items assigning a value to the array and save again just 111 00:09:52,800 --> 00:10:00,090 to remove it, so we see that we've got each one of the array items so we can list out the property 112 00:10:01,740 --> 00:10:05,160 and then the value because we're using the entries. 113 00:10:05,370 --> 00:10:07,060 So it's converted into an array. 114 00:10:07,500 --> 00:10:12,400 So it's listing out the property, the value, property value, property value all the way down. 115 00:10:12,870 --> 00:10:21,140 So go ahead and try to make and update your object information, adding in more complexity into it. 116 00:10:21,510 --> 00:10:29,640 So checking out the different courses and adding in an array of objects of items there, loop through 117 00:10:29,640 --> 00:10:37,440 it and output it with the key values and entries into the console and you'll be ready to move on to 118 00:10:37,440 --> 00:10:38,220 the next lesson. 119 00:10:38,910 --> 00:10:39,840 The lesson challenge. 120 00:10:39,840 --> 00:10:42,510 Create an object loop to the contents of the object. 121 00:10:42,720 --> 00:10:48,410 Add an array within the object has value, add another object within that object as a value as well.