Exercise 26b

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

[00:00:03]
>> Jafar Husain: How do we manage to get a variable bound to both of these at the same time, right? Cuz that's what we need, yep?
>> Speaker 2: Zip.
>> Jafar Husain: Zip, right? Cuz zip will allow us to go through both of these arrays positionally at the same time and execute and pass them both to a function, one from the left hand side and one from the right hand side.

[00:00:22]
So if I use array.zip, and I pass in time, and I'm actually gonna, to be very clear here, I'm gonna be, I always name arrays, array variables plural, even if I only expect to have one in them. Cuz we don't want any any confusion about whether it's an array of one or just one value.

[00:00:37]
So I'm gonna call it times. And boxarts, cuz who knows? It could have more than one. And then we have time. Now we have a single time and a single boxart. And here, notice I have a variable bound to time. That is the time for the the video, the one time.

[00:00:55]
I have variable bound to the smallest boxart for the video. In fact, I'm actually gonna emphasize that by calling it smallestBoxart. I have a variable bound to video. I have a variable bound to list. I have everything I need in order to create my final result. So, inside of here, I'm gonna take what I was doing earlier and paste it in.

[00:01:22]
>> Speaker 3: They're saying you're missing an opening param at 162.
>> Jafar Husain: 162, is that, am I? That's why that was saying that I, perfect. Okay, thanks guys. Time, smallestBoxart. Now, I think actually I had to grab not just the boxart, but the URL of the boxart if I remember correctly, or is that correct?

[00:01:56]
Okay, so we've got more to it than just that. Now we could throw a map in there, or right here, we can just pull out the URL. That's probably what I would do so I'll just do that.
>> Speaker 3: Also on 158 to 159 you have both boxarts.
>> Jafar Husain: Thank you.

[00:02:17]
Yes, that is not good.
>> Jafar Husain: So now we have an editor, so it's much easier to line up our brackets.
>> Jafar Husain: I'm gonna lower this font size just for a second, guys. I'll bring it right back up.
>> Jafar Husain: So let's see if we've got, now we've done the first step, which is just keep mapping, just keep mapping until, or zipping as the case may be, until we've got a variable bound to everything that we need to create our result.

[00:03:14]
Now let's just see where we are. I mean, maybe we don't have the right result. Maybe we're off by a few brackets or something. So let's copy.
>> Jafar Husain: Paste, and then see what it looks like when we run. Uh-oh, I'm missing a semicolon.
>> Jafar Husain: That's always a challenging one.

[00:03:56]
>> Jafar Husain: So the first thing to do is make sure all of our brackets are matched up. That looks good to me.
>> Jafar Husain: Anybody out there see my syntax error?
>> Jafar Husain: Maybe right here? Hm, looks good. Starting parentheses.
>> Speaker 3: Return needs perim.
>> Jafar Husain: Sorry?
>> Speaker 3: Did you just catch that object?

[00:04:37]
Return needs perim, is what they're saying? [CROSSTALK]
>> Jafar Husain: Line number, guys?
>> Speaker 3: 170 [CROSSTALK]
>> Jafar Husain: 170, this one?
>> Speaker 3: Yeah, I think you got it. That's what it was.
>> Jafar Husain: That was the missing piece, okay.
>> Jafar Husain: Mm-mm, well, I'm pretty sure this is the right answer. So, well, I wanna, I think I'm missing another parenthesis here actually, to end zip.

[00:05:21]
>> Jafar Husain: Yes.
>> Speaker 4: Have you tried the browser console for debugging?
>> Jafar Husain: Yeah, well that's actually what I'm doing. So if we switch over, we should see the printed results here.
>> Speaker 4: That's the web console. There's something different called the browser console.
>> Jafar Husain: In Firefox?
>> Speaker 4: Yeah, look under the developer, the Webtools menu on the browser.

[00:06:03]
>> Jafar Husain: On the browser side? Well actually, do you mind, I think we've actually got the result here, can we just take a quick look at this? And then I'll, I think we're actually in a good place now. I'm just not sure if we've got the right one, so let me just clear.

[00:06:16]
And I'll run that one more time.
>> Jafar Husain: So it's complaining that we don't have the right expected output. But let's take a look at what we actually have.
>> Jafar Husain: Now can anybody see if I've done something wrong here? Cuz to me, it actually looks reasonably good.
>> Speaker 5: You have to, don't you have to concat and work on it?

[00:06:39]
>> Jafar Husain: Yep. It looks like we've got an extra level of array nesting here, because within each video, we have an array of one video, right? That's probably not what we want. So we see right here under videos, we actually have a two dimensional array. So this is the key to actually debugging your code.

[00:06:55]
Do a map, print it out, take a look at it and see if it actually matches up with what you expect. So we forgot to go through and do our level of nesting. So, or want to one level of nesting here. So what I'm gonna do right here in this map, this doesn't seem like a two dimensional array to me.

[00:07:13]
Because, what we've got is we've got a list and for each one, we're returning a list object. So this isn't the problem. It's over here at videos that we seem to have an extra level of array. So how do we get it out? How do we get it out?

[00:07:27]
Concat.
>> Speaker 2: Concat.
>> Jafar Husain: Concat? I don't know. That might be the solution, but I don't think so. I think we actually have the exact same problem that we had before. I could be wrong here, but maybe not. Maybe we just need concatMap. You're right.
>> Speaker 2: It's just an array of arrays.

[00:07:44]
>> Jafar Husain: You're right, videos is an array of arrays. So right here, we know that we can apply a concatMap. I can just make that change directly in Firefox.
>> Speaker 4: You have to implement it.
>> Jafar Husain: Yeah, I loaded this up this morning and I restarted it. So we just have to make sure.

[00:08:14]
If you ever run into a problem where you can't find concatMap, just go up and rerun your concatAll function. If you've closed your browser and then opened it again, remember that concatAll and concatMap don't exist on the array. And so you've just gotta go up and make sure to run your concatAll example.

[00:08:29]
So to add it back into the browser.
>> Jafar Husain: And then run your concatMap example. Now hoping that it'll work.
>> Jafar Husain: Worked. So no news is good news. Actually, yeah, we're returning results. So as you can see, you can attack this iteratively, right? Just keep printing it out to the console.

[00:08:57]
My Firefox lack of proficiency notwithstanding, whatever your browser is that you feel comfortable using, write it out to the console. Take a look at the expected output, and you can just apply the right operator, whether it's concats. Figure out how many levels deep you are, and then apply the concats where you need to apply them.

[00:09:14]
So that's the coping mechanism for trying to deal with these large expressions and print them out, so.