Exercise 25

[00:00:00]
>> [MUSIC]

[00:00:03]
>> Jafar Husain: So, we see that we can use this exact same technique to join together relational data sources. So, I'm going to take this, which is precisely the same example here. Notice that we have a, so in this case we want to build a tree from these two rotationally connected lists.

[00:00:22]
So we have a list of videos, a list of lists and they're connected by ID. We want to actually use the operators we use such so far to actually build this structure, this hierarchical structure. So I want to show you that we can go from relational to hierarchical as well as hierarchical to relational.

[00:00:36]
So, everybody see this structure? You should be pretty familiar with it, right, by now because it's kind of what we've been using thus far. So we've got videos nested inside of lists. But look at what we're starting with. We're starting with lists in a separate array, then videos, and the only thing to link them up is inside of videos, we have a list.id.

[00:00:54]
So now we're just sort of taking our skills out for a walk and seeing if we can go between all these kind of very different data structures. So I'm going to try this example right now, we're gonna go from list, I'm gonna map over a list. And for every list we are going to map over videos.

[00:01:10]
Now notice that videos and lists are at the same level here right there. I don't need to go through the list in order to get access to the videos. But I'm nesting two maps to go through all the potential possibilities of combination of list and video that's what happens when you nest the maps.

[00:01:23]
It's interesting that I can also, ultimately, go the other way. I could go videos and then map through and look at the list. Because I have access to both of these arrays at the same time. Now I just told you that if you have access to both arrays of the same time, zip is often a good option here, right?

[00:01:38]
But in this case, I'm not going through two arrays where information is connected just by its position in the array. I'm actually just trying to get all the possibilities between two different lists. And this will actually turn out to be interesting and useful for async programming as well.

[00:01:53]
So if I go through each list and then for each list I go through each video. I can go ahead and, well first off filter, so I'm gonna the filter the video such that the list.id in the video is equal to the list.id, right. So I'm taking a look at this collection right here.

[00:02:11]
Notice that the video has a list.id and it matches up with the ID property on the list. And so by doing this, we're gonna go through every possibility of list and video and link them together only when the IDs match up. So now all I have to do is map that into

[00:02:30]
>> Jafar Husain: The structure that we want, which is the video ID.
>> Jafar Husain: Or is it name?
>> Jafar Husain: I think it actually wants the whole thing here, okay.
>> Jafar Husain: Sorry, let me take a moment to just read this. So, we actually want to build the whole trees, so we're not just grabbing a few things here.

[00:02:58]
So, I'm going map this into the list object that I want, the hierarchical list object I want.
>> Jafar Husain: So it's gonna contain the list information, in this case the name of the list.
>> Jafar Husain: And the videos inside of that list. So I'm going to swap this around just a little bit.

[00:03:28]
And we're just going to take this down here.
>> Jafar Husain: And plug it in here.
>> Jafar Husain: So I think we'll do the combinations later on, but so once I format this correctly, you'll see that we've built a tree from some lists.
>> Jafar Husain: That's gonna work.
>> Speaker 2: Wouldn't you need, if you're doing lists.map, isn't that going to be list?

[00:04:17]
>> Jafar Husain: Yes you could be great, you just caught it. I've got it and it's looking for a it seems to have a list.id in the input their videos. Now it's complaining that videos has this list.id property. Whereas, in here, we don't have, we actually just have the ID and title.

[00:04:37]
So I forgot to map out just the properties that we want. At this point, there's no need to have the list.id link anymore, because I've nested each video in its list. So, I'm gonna go through these videos, and instead of just filtering them, I'm actually gonna map them, and just pull out the properties that I want.

[00:05:03]
>> Jafar Husain: I think it's just ID and name, yeah. So when you're filling out the exercises, wherever possible, try and keep the same property order here because it compares based on property order. Of course in practice, in JavaScript, that doesn't matter. Let's see if that works. Got one of those annoying missing after argument list errors.

[00:05:25]
And that looks reasonable to me, so I'm just gonna hit the answer here. But as you can see the same solution, albeit a little more verbose. So we're going through each list, we're creating the list object. We have the name and then we're embedding just the videos. Now in order to get the videos for just that list, we'll filter it looking up just where the list.id matches up with the list.id that we're currently going through.

[00:05:52]
So we compare there on line 41 the videos list.id with the lists that were inside of ID. And then finally we just map and select just those video properties we want. Which in this case everything but the list.id and now we've taken two lists and turned them into a tree