3.3 Reorganizing Our Collection With GroupBy

Now that we've just added map and reduce as functional utilities, I hope you're starting to see that this can be really useful and helpful for write, general code writing. So before we forge ahead to do a group here, I just wanna show you a couple changes I've made to prepare for this. So you don't have to see all the inner workings here. So I've created this fp object to kind of namespace all of our utilities. So I moved filter on there, map, reduce and even add. And then anywhere where they're called, obviously now they need to be called with fp dot filter, fp dot reduce, there's one down here, so I've made all those changes. The other thing I did was in the index file, we were using this template here and we're gonna be grouping our beers into groups, you'll see how in a minute, and so we need a new template that can actually handle those groups. So we created the new template and I am now referencing it here instead of the old template. So, currently we have a broken site because we're referencing a template that expects groups, but we're passing it in the beers the same data. And so what we'll need is actually change this data inside of Load Beers. So, here's our website, all of our beers are gone, but the requirement that came in from the fictional client here is that we want the filters for ales, lagers and stouts, and possibly we may add some more types of beers. But we want to get rid of these domestic and import filters, because we want to actually split up the list and have domestic at the top and imports at the bottom. We could do this just by hard-coding the JSUM data. We could make a group here for domestic and a group here for imports but, if you know clients, you know that sometimes they change their mind. And, so, constantly reconfiguring this data as it's hard coded on the page is not the best solution. What if we could just group by certain attributes and then shove it out of the page, and if we change our mind, we just change how we group. So that's what we're gonna try to do today. So a first thing we need to do here is just get rid of our domestic and imports filters, we don't need them anymore. I'm gonna leave them in here, because, like I said, if they change their mind we want to be able to bring those back and there's no reason to get rid of these cases. They'll just never be called right now. But up here in our functional section, we're going to add our newest member, groupBy, and it's going to take a collection and a callback, which should seem pretty familiar to you right now. And in here we're gonna save off a grouped object, all right? Because it's not an array. Because here we're converting an array into an object, map and filter just transform an array. Reduce converted an array down to a value, and, now, groupBy is going to take an array and turn it into an object, based on some property that's on each object in the collection. OK, so what we want to do is say if the locale, whatever the locale is, just create a new group based on whatever that locale is. So, if there was a new one called Belgian or something, you know, so you wanted to have local or domestic, import, and then a special Belgian locale. All that would have to happen is just by changing this locale here to Belgian in one of them, that new group would be generated based on the way the groupBy works. So we are gonna want to inspect this, so again we're gonna loop over everything. And we're gonna use the same strategy we've been using where we pass the collection I, or the item that we're on in that collection, into the callback. This is actually gonna be the key that we want to store our new value at. So we could just say grouped and then use the bracket notation, and say that equals our collection [I] except that what this does is only allow for one item. And what we actually want is for it to be an array. So, we would want to say, push here. Except that's not gonna work because we don't know if the array exists yet. The first time through that array actually doesn't exist. So we have to do is check to see if the array exists, and we're already writing collection i a lot, so we should probably do some storing off here. So what we'll do is, we'll say, var group here. And then inside of the for loop we'll keep changing what group is, so group equals [BLANK_AUDIO] that. So now we have our group set off cuz that's gonna be a name, you wanna return a string from your callback. So in our case, we'll just say, we'll return the beer.locale. And so then that string, so it'll be domestic or import, will be set to group and so then we want to check to see if grouped.domestic or group.import already exists so if it doesn't, so if we don't have grouped. Group. Then we wanna create it, so we would say grouped.group equals an array. And that allows us to do something, something a little simpler right here. We can just push onto it, knowing that it already exists. And at the end of all this, obviously we want to return our grouped object. So I went kinda fast here. Just to reiterate what happens. We get a collection on a callback. We save off an empty object and a place holder for each group. We loop over the collection and each time we run the callback on the collection and get a reference to the group name. And actually, to be clear, we can even just say this is the groupName. So, that's a little uglier, but it's a little more clear so I like it. So groupName is gonna equal whatever your callback returns. Again, in our case, we wanna just return the beer's locale. If grouped.domestic doesn't exist, then grouped.domestic should equal a new array, and so on and so forth. And then, in either case, whether it's a new array or it's already been there, we're now going to just say grouped.domestic.push and push on the beer. So let's use this. Back up in our oh, actually it's down here, right? In load beers. We're going to say that our var grouped, oh sorry. This is a beer groups. Equals fp dot group i, pass in the beers, and a callback which takes the beer. And all we're gonna do is return beer dot locale. And so here, instead of passing beers, we now pass beerGroups. And by saving this, we're now passing in the data that the template expects, because beers is the key and inside there is a new object that has a key of import and domestic, or any number of keys, really, based on the locale values in the data set. So, back in the browser, we can re-load, and we've got a couple things going on. So, our filter list has changed, we now have our domestics group here and our imports group here and the total average ABV is the bottom still from last video. So even if we switch to ales, we still have a split here between the domestic ales and the imported ales. Stouts only has one of each. Lagers. They're all domestics and you can see that the other label doesn't even show up because we don't have any. This is a really nice side effect of what happened here. In the next video we'll go one step even further to show you how we can really get useful and powerful with these utility functions. We're gonna take a look at something called pluck and something called mean.