1 00:00:06,680 --> 00:00:12,820 Let's get started with a ray of object for this particular section. 2 00:00:12,830 --> 00:00:18,200 We have covered it in a previous section and the arrays and object. 3 00:00:18,560 --> 00:00:22,000 So the difference here is about the data structure. 4 00:00:22,010 --> 00:00:28,610 So instead of using single values like numbers and strings for this particular section, we are going 5 00:00:28,610 --> 00:00:30,980 to deal with arrays of objects. 6 00:00:31,130 --> 00:00:38,840 So all the methods that we use in the pivot section talking about MapReduce and filter, that's what 7 00:00:38,840 --> 00:00:41,420 you are going to use it in this particular video. 8 00:00:41,540 --> 00:00:47,960 So to get most out of this section, our advice to you to make a review on the arrays section. 9 00:00:49,060 --> 00:00:53,780 But in case you are comfortable with ray meters then let's get started. 10 00:00:53,800 --> 00:00:58,570 Barrister I'm going to explain everything I write, so let's get started. 11 00:01:00,440 --> 00:01:05,540 Like I said, we are going to repeat ourselves by the data structure that is going to be different in 12 00:01:05,540 --> 00:01:06,620 this particular section. 13 00:01:07,100 --> 00:01:12,170 So the first one that we are going to talk about is called for each. 14 00:01:14,050 --> 00:01:15,070 For each. 15 00:01:17,520 --> 00:01:17,940 It. 16 00:01:19,860 --> 00:01:29,700 The data that we are going to work on is a race of student that is students equal to array of students 17 00:01:29,700 --> 00:01:31,680 going to be arrays of object. 18 00:01:31,950 --> 00:01:40,080 So for the first students, let's give it a name of John comma and the age is going to be 20. 19 00:01:40,230 --> 00:01:43,800 So let me copy this one and repeat it three times. 20 00:01:43,800 --> 00:01:46,080 I want to have four students. 21 00:01:46,810 --> 00:01:48,520 Come on, three, save it. 22 00:01:48,520 --> 00:01:53,890 And lastly, let's paste this one, two to change this one to Mary. 23 00:01:53,890 --> 00:02:03,640 And the age is 26 years and this one is Peter and the age is also 22 years and this one going to be 24 00:02:03,880 --> 00:02:08,139 Sally and the age is going to be 23. 25 00:02:08,139 --> 00:02:11,830 So this is a data that we are going to work on. 26 00:02:12,700 --> 00:02:21,700 So now let's talk about for each well the for each method looks through an array and execute a function 27 00:02:21,700 --> 00:02:30,100 for each item in the particular array and for each does not mutate the original array as we discussed 28 00:02:30,100 --> 00:02:31,330 in previous video. 29 00:02:31,540 --> 00:02:39,220 So let's say that we have lists of student and we want to look through and display the names only we 30 00:02:39,220 --> 00:02:41,380 can use for each to do that. 31 00:02:41,380 --> 00:02:42,580 So here you go. 32 00:02:42,580 --> 00:02:48,460 So as before, the same syntax, but the data structure that differs here. 33 00:02:48,460 --> 00:02:51,820 So I would take my students array on that. 34 00:02:51,820 --> 00:02:56,860 We have for each method on that and we call it as that. 35 00:02:57,640 --> 00:03:01,650 So at this point we can use normal function or arrow function. 36 00:03:01,660 --> 00:03:03,010 So here we go. 37 00:03:03,100 --> 00:03:05,710 Let's use a function this time around. 38 00:03:05,890 --> 00:03:10,030 And for each it takes in three arguments. 39 00:03:10,060 --> 00:03:18,250 Remember, one is an actual item and then one is an index of the item and the next is the origin array. 40 00:03:18,730 --> 00:03:22,150 So here I can console.log each of these ones. 41 00:03:22,150 --> 00:03:27,580 Let's say this the item here and I'm going to be the item. 42 00:03:27,580 --> 00:03:31,570 So let me paste this one two times. 43 00:03:31,690 --> 00:03:32,920 It's going to be the index. 44 00:03:32,920 --> 00:03:35,530 Index going to be the index. 45 00:03:36,430 --> 00:03:39,220 That's the index of the individual items. 46 00:03:39,220 --> 00:03:43,320 Lastly, going to be the origin array as the origin array. 47 00:03:43,330 --> 00:03:46,960 I start when I save it and I check my console. 48 00:03:46,960 --> 00:03:48,760 Indeed, let me refresh it. 49 00:03:48,760 --> 00:03:53,470 And now we say that the array has printed how many times. 50 00:03:53,470 --> 00:03:57,640 One, two, three, four. 51 00:03:57,730 --> 00:03:58,330 Right. 52 00:03:58,330 --> 00:04:01,390 So it means that we have four records in the array. 53 00:04:01,390 --> 00:04:04,000 So this array will repeat it four times. 54 00:04:04,000 --> 00:04:07,270 Let's say we have only one record in this array. 55 00:04:07,480 --> 00:04:10,900 It means that this array is going to repeat only one time. 56 00:04:10,900 --> 00:04:11,890 So have a look. 57 00:04:12,040 --> 00:04:19,000 If we see that we have only one time being looped and the first one is the item which represent the 58 00:04:19,000 --> 00:04:21,250 individual student in the array. 59 00:04:21,279 --> 00:04:22,990 That's what we call the item. 60 00:04:24,290 --> 00:04:30,530 And the index determined the position of this particular item in the array because the first one, that's 61 00:04:30,530 --> 00:04:37,970 where we have what the first index of zero and the original array is that if our it indeed we have only 62 00:04:37,970 --> 00:04:39,880 one record in the array. 63 00:04:39,890 --> 00:04:46,730 So let's bring back all the data in the array so you can see that we have four that have been looked 64 00:04:46,730 --> 00:04:47,390 in. 65 00:04:47,390 --> 00:04:47,870 Great. 66 00:04:47,870 --> 00:04:54,620 So for this one we can see that I want to display only the name of H. 67 00:04:54,620 --> 00:04:57,410 That is why for each comes into play. 68 00:04:58,220 --> 00:05:03,860 So let's say that we have a front end application and want to display this one to the browser we can 69 00:05:03,860 --> 00:05:11,030 use for each and then create the element and just inject it into the DOM for us to see inside the browser. 70 00:05:12,200 --> 00:05:17,650 So for this agreement, the most required one is the item, the first one. 71 00:05:17,660 --> 00:05:20,510 The other ones are optional, right? 72 00:05:20,510 --> 00:05:26,150 But in case you want to delete, let's say a data, they will need what is called an index. 73 00:05:26,150 --> 00:05:29,800 But ideally we don't even bring in the original array here. 74 00:05:29,810 --> 00:05:34,220 And also in most cases we don't use the the index. 75 00:05:34,220 --> 00:05:38,540 For example, if you are dealing database, we have the ID of the record only. 76 00:05:38,540 --> 00:05:43,180 So there is no need to get the ID here or using the index as an ID. 77 00:05:43,190 --> 00:05:44,750 So let's remove that. 78 00:05:44,750 --> 00:05:49,760 And now we have all the item that is a user in my array. 79 00:05:49,790 --> 00:05:54,080 So for this one I can get the name only. 80 00:05:54,080 --> 00:05:58,640 So a name is going to be item dot name. 81 00:05:58,640 --> 00:06:02,420 So here let's make it as user because it's a user. 82 00:06:02,630 --> 00:06:04,850 Let's make it more descriptive here. 83 00:06:05,240 --> 00:06:06,050 That is it. 84 00:06:06,050 --> 00:06:07,940 So I can also copy this one. 85 00:06:07,940 --> 00:06:08,840 And then. 86 00:06:09,810 --> 00:06:13,950 Carpet is one piece and I want the age of the user. 87 00:06:13,980 --> 00:06:15,030 So here you go. 88 00:06:15,100 --> 00:06:18,630 Going to be each of the user if I save it. 89 00:06:18,630 --> 00:06:21,540 You see that I have them nicely being displayed here. 90 00:06:21,570 --> 00:06:22,410 So that is it. 91 00:06:22,410 --> 00:06:24,480 About the four h. 92 00:06:24,480 --> 00:06:29,970 Like I said, if you go to the dot manipulation, we are going to loop through data like this one and 93 00:06:29,970 --> 00:06:35,730 then display it inside the browser for users to see that they're displaying it inside the console. 94 00:06:35,760 --> 00:06:41,250 As you move on, if you get to the manipulation, you can see how important this method is.