Enter Your Email Address to Watch This Lesson

Your link to unlock this lesson will be sent to this email address.

Unlock this lesson and all 827 of the free egghead.io lessons, plus get JavaScript content delivered directly to your inbox!



Existing egghead members will not see this. Sign in.

Just one more step!

Check your inbox for an email from us and click link to unlock your lesson.



Create a list with nested reduce functions in ImmutableJS

1:30 JavaScript lesson by

ImmutableJS reduce functions can be nested to get data out of complex data structures. In this example, we will create an Immutable List from an Immutable Map that is nested inside of an Immutable List that is itself nested inside of an Immutable Map.

Get the Code Now
click to level up

egghead.io comment guidelines

Avatar
egghead.io

ImmutableJS reduce functions can be nested to get data out of complex data structures. In this example, we will create an Immutable List from an Immutable Map that is nested inside of an Immutable List that is itself nested inside of an Immutable Map.

We have an Immutable map representing a cart with a couple of albums in it, and I want to make an Immutable list of all the performers.

We'll start by writing const names = cart.getItems.reduce. Our first argument is the callback function, which we'll give P for previous and C for current, and our initial value with be an empty Immutable list.

Inside our reduce function, we can console.log C, which shows us each item in our cart. Notice that Personnel is an Immutable list that contains an Immutable map for each of the featured performers.

In order to process the Personnel list, we will reduce over our personnel. The setup is similar to what we've done on the outer reduce. We'll create a constant, N, and we'll set it equal to C.getPersonnel.reduce.

When I nest reduce functions, I like to add an I to my previous and current variables, since they're inside. I'll put PI for previous inside and CI for current inside. This also allows us to maintain access to our P variable from the outer reduce in case it's needed.

Since we're making a list, our initial value for our inner reduce will again me an Immutable list. If we console.log CI, we see a map for each performer. Since we want to make a list of the performers' names, we'll return PI.concat CI.getName.

Now, in our outer reduce, we'll return P.concat N, which is the list of names created by the inner reduce. Now, when we console.log names, we'll see our list of names in the order they were added to the list.

I think it would look better sorted, so let's put a .sort on it.

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?