Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:00,450 --> 00:00:01,500
In this video.
2
00:00:01,500 --> 00:00:07,980
What we're going to do is actually compute the names based on the option state that we have.
3
00:00:08,490 --> 00:00:15,510
So what I want to do is right over here, when we click this button, I'm going to add a click handle
4
00:00:15,510 --> 00:00:16,500
event handler.
5
00:00:16,920 --> 00:00:24,810
And when I call this or when I click this button, what I want to do is I want to call a function called
6
00:00:24,930 --> 00:00:29,700
compute selected names like so.
7
00:00:30,210 --> 00:00:35,160
So let's go all the way right over here and let's actually define that function.
8
00:00:35,520 --> 00:00:40,800
So most say Konst compute selected names.
9
00:00:40,980 --> 00:00:44,130
This is going to be a regular arrow function.
10
00:00:44,880 --> 00:00:52,950
So now what we want to do here in this function is figure out all of the names that belong to the category
11
00:00:52,950 --> 00:00:56,070
that our state is currently in.
12
00:00:56,760 --> 00:01:02,910
So what I'm going to do is I'm going to say Konst filtered names and I'm going to say that this is going
13
00:01:02,910 --> 00:01:07,290
to be equal to the names array that we have over here.
14
00:01:07,680 --> 00:01:10,980
And then I'm going to say dot filter.
15
00:01:10,990 --> 00:01:13,650
So I want to filter this array.
16
00:01:14,100 --> 00:01:19,050
So the first filter is going to be filter by the gender.
17
00:01:19,500 --> 00:01:24,870
So right over here, let's define a callback that's going to grab every single name.
18
00:01:25,350 --> 00:01:31,470
And then, well, what I want to do is I want to check the name Dot Gender.
19
00:01:31,800 --> 00:01:34,600
So I want to see what that name Dot gender is.
20
00:01:34,660 --> 00:01:42,060
Remember, each name has each gender and I only want to return it if the name does gender triple equals
21
00:01:42,060 --> 00:01:45,390
what we have the options dot gender.
22
00:01:45,810 --> 00:01:48,630
So right now we have all of the options being girls.
23
00:01:48,960 --> 00:01:55,650
So we're only going to return all of the girls at that point and it's going to return to us and array.
24
00:01:55,980 --> 00:01:57,600
So just go ahead and save that for now.
25
00:01:58,170 --> 00:02:04,350
Now, because this is going to return to us an array we can actually apply in another dot filter and
26
00:02:04,350 --> 00:02:06,660
do the exact same thing with popularity.
27
00:02:06,990 --> 00:02:09,140
So over here, let's go ahead and do that.
28
00:02:09,150 --> 00:02:15,210
So we're going to grab the name and then what we're going to do is we're going to say Name Dot and this
29
00:02:15,210 --> 00:02:16,500
time popularity.
30
00:02:16,890 --> 00:02:22,500
We want to check that the options is going to be options dot popularity like.
31
00:02:22,500 --> 00:02:24,060
So there we go.
32
00:02:24,060 --> 00:02:31,920
And this is going to now return us all of the different all of the different names that belong to this
33
00:02:31,920 --> 00:02:32,840
group right over here.
34
00:02:32,850 --> 00:02:34,980
So girl as well as trendy.
35
00:02:35,790 --> 00:02:38,910
Now, the last thing that we want to do is we'll get the length.
36
00:02:38,940 --> 00:02:45,210
The length is going to be a little bit more complicated because if we supply all, we just want to get
37
00:02:45,210 --> 00:02:49,350
all of the names that are still there, regardless if they're short or long.
38
00:02:49,770 --> 00:02:52,230
So now what we're going to do is just apply another dot filter.
39
00:02:52,530 --> 00:02:54,330
Let's have a callback function like.
40
00:02:54,330 --> 00:03:00,060
So this time we're going to use curly braces because we're going to have multiple lines here.
41
00:03:00,690 --> 00:03:02,610
So what I'm going to say is if.
42
00:03:03,530 --> 00:03:04,190
Options.
43
00:03:04,200 --> 00:03:09,200
So if the option dot length triple equals.
44
00:03:10,590 --> 00:03:11,370
Length.
45
00:03:11,670 --> 00:03:12,780
Thought all.
46
00:03:14,160 --> 00:03:18,540
Then what we're going to do is just very simply just return true.
47
00:03:19,050 --> 00:03:22,200
Because at the end of the day, what this is returning is a boolean value.
48
00:03:22,230 --> 00:03:27,600
So each time we iterate through a particular name, we are either returning true or false on whether
49
00:03:27,600 --> 00:03:30,300
we want to have that into the new filtered array.
50
00:03:30,660 --> 00:03:33,270
So if it's all, then we just want to return.
51
00:03:33,270 --> 00:03:33,510
True.
52
00:03:33,510 --> 00:03:37,230
Doesn't matter if they're short or long else else.
53
00:03:37,230 --> 00:03:42,550
Then what we want to do is we want to return name dot length.
54
00:03:43,020 --> 00:03:47,880
We're going to say here that this is equal to options thought length.
55
00:03:48,120 --> 00:03:52,020
Now, if this doesn't make sense to you, this filter callback and what we're doing, I highly suggest
56
00:03:52,020 --> 00:03:54,780
maybe watching a video or reading some documentation.
57
00:03:54,990 --> 00:03:58,680
I do expect you to know this if you are trying to learn, Nuck.
58
00:03:58,680 --> 00:04:03,750
So this is just kind of vanilla JavaScript that you should probably know as a prerequisite.
59
00:04:04,620 --> 00:04:08,850
Okay, so what this is going to do is send a give us give us all of the names, and then what we want
60
00:04:08,850 --> 00:04:13,020
to do is now assign this state to the filtered names.
61
00:04:13,440 --> 00:04:16,350
So over here I'm going to say selected names.
62
00:04:16,350 --> 00:04:18,580
Dot value is equal to.
63
00:04:19,050 --> 00:04:21,630
I'm going to call this filtered names.
64
00:04:21,930 --> 00:04:24,200
I'm going to say filtered names now, right away.
65
00:04:24,210 --> 00:04:25,950
This is the power of TypeScript.
66
00:04:26,220 --> 00:04:27,600
Right over here, we define it.
67
00:04:27,600 --> 00:04:30,090
This is going to be an array of strings.
68
00:04:30,390 --> 00:04:36,030
However, if I hover over this well now this is actually an array of names, not an array of strings.
69
00:04:36,390 --> 00:04:40,830
So this could have been an innocent mistake that we have definitely would have done.
70
00:04:41,010 --> 00:04:43,560
But with TypeScript, we were able to catch it.
71
00:04:43,860 --> 00:04:49,530
So now what I can do is I can actually do a dot map so I can iterate over this and return another array.
72
00:04:49,950 --> 00:04:58,050
And over here, I can just very simply just say I want to return the name, dot name right over here.
73
00:04:58,530 --> 00:05:01,410
Some say name dot name like so.
74
00:05:01,590 --> 00:05:04,110
And that's just going to give us an array of strings.
75
00:05:04,740 --> 00:05:05,100
Okay.
76
00:05:05,100 --> 00:05:07,830
So let's actually go ahead and give this a quick test.
77
00:05:08,190 --> 00:05:11,820
Some might say, boy, I'm going to say short and I'm going to say unique.
78
00:05:12,210 --> 00:05:13,320
Let's go ahead and do this.
79
00:05:13,320 --> 00:05:17,280
And now you can see we get Laith Lamelo, Selma and Asher.
80
00:05:17,670 --> 00:05:19,860
And if I actually went over here.
81
00:05:20,820 --> 00:05:23,250
So La Melo is short and unique.
82
00:05:23,250 --> 00:05:25,500
And as a boy, we get.
83
00:05:25,740 --> 00:05:26,940
What else would we have?
84
00:05:27,330 --> 00:05:28,830
We had Laith somewhere in there.
85
00:05:29,310 --> 00:05:29,970
Right here.
86
00:05:31,100 --> 00:05:33,360
Uh, we got Asher.
87
00:05:33,380 --> 00:05:34,820
Boy unique shorts.
88
00:05:35,270 --> 00:05:37,070
And what was the last one?
89
00:05:38,630 --> 00:05:39,290
Selma.
90
00:05:39,890 --> 00:05:40,700
Wherever that is.
91
00:05:40,700 --> 00:05:41,240
Right here.
92
00:05:42,050 --> 00:05:42,440
Okay.
93
00:05:42,890 --> 00:05:45,050
Now, we can, of course, do the same thing for something else now.
94
00:05:45,050 --> 00:05:47,380
So we can go say girl trendy.
95
00:05:47,390 --> 00:05:48,900
All right.
96
00:05:48,980 --> 00:05:49,580
Olivia.
97
00:05:49,580 --> 00:05:50,150
Brooklyn.
98
00:05:50,150 --> 00:05:50,780
Zoe.
99
00:05:51,170 --> 00:05:52,460
Valentina.
100
00:05:53,120 --> 00:05:53,600
I know.
101
00:05:53,600 --> 00:05:56,480
I'm sure you've seen Maya.
102
00:05:56,480 --> 00:05:56,960
Ivy.
103
00:05:56,980 --> 00:05:57,440
Whatever.
104
00:05:57,890 --> 00:05:58,780
So this is good.
105
00:05:58,790 --> 00:06:02,570
So you can see that this is actually working the way that we expected.
106
00:06:03,050 --> 00:06:09,540
But now what I want to do is I want to iterate over this array and render cards.
107
00:06:09,560 --> 00:06:11,090
Obviously, I don't want to render an array.
108
00:06:11,090 --> 00:06:13,400
This isn't a very nice user experience.
109
00:06:13,700 --> 00:06:15,560
I actually want to render cards.
110
00:06:15,890 --> 00:06:18,530
So let's go ahead and do that in the next video.
9551
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.