Looping: Learn Alpine.js

Learn Alpine.js

Sign in Get started

Playing

11. Looping

Transcript

00:00

Another really important part of development, of course,

00:02

is iterating. That's what we're going to look at now. We kind of touched on this earlier. But what we didn't look at is using

00:09

a key for each iteration. We're going to look at a few examples of how we can iterate through data now. And then we're going to look at what key does

00:18

and why it's so important. We're also going to look at a practical example of why this can go wrong. So let's start with a really simple example

00:25

just to kind of get us started. We're going to have an array of numbers in here. So let's just create out numbers 1 through 5. And let's iterate through them.

00:35

Now, we said before, when we looked at this and we touched on it, we need to use a template element to achieve this. So let's just figure this out.

00:44

And then go ahead and use x4. So we say number, which is what we want to call each object or thing in the iteration, in, and then the actual thing that we're iterating through.

00:56

And then down here, we can just output that value. So let's just output the number. And let's go over and check this out. We get 1, 2, 3, 4, 5.

01:04

Now, what we can also do, if we just copy this and comment it out, is grab an index for each thing we're iterating through. So for example, let's just say that we were iterating through some fruit.

01:16

Let's just choose some fruit in here and finish up with grapes, if I can spell it. So now, we're going to iterate through each of them fruits as fruit.

01:31

And then we're going to output the individual item in here. Let's make this a div, actually, just so we can pull this down on each line. And there we go.

01:40

So really, really simple just to iterate through a list of things. Now, let's change this over to an ordered list or an unordered list.

01:48

It doesn't really matter. And let's look at grabbing the index for each of these. So this is going to be a list item. And then when we view this, you can

01:57

see that we get numbers 1, 2, 3, and 4. So you can just kind of build the UI up based on whatever you want to do. If you didn't have an ordered list here, though,

02:07

and you wanted to output the actual index for each of these items, so again, let's switch this over to a div, what you could do is you could grab the index directly within the loop.

02:18

So in this case, we're going to say fruit and index. That will give us the 0 index thing. Let's output a span in here. And let's change this to a span as well,

02:29

just to make this a bit better. And we'll wrap that in a div. Obviously, we're not working with any kind of styling here. And let's go ahead and say x text on this.

02:41

And let's set that to the index itself. And then let's just do maybe a code on there. So we end up with 0, 1, 2, 3, because as you may know, arrays are indexed in 0, or from 0 within JavaScript.

02:56

But because x text can take any expression, we can just add 1 for each iteration. So we start at 1 and go through to 4. We've already seen this as well, but let's

03:06

take a look at another example of how we can iterate through an array of objects, which is most likely going to be the case if you are hitting an API. And we're going to look at an example of that later as well.

03:16

So let's say we had an array in here of people. Let's say we had an ID for each of these and then maybe a name for each of them. Let's go ahead and just grab all of this and duplicate it along.

03:30

And we'll create one for, well, we'll do three in total. So we're going to set ID of 2. And we'll set that to Billy and ID of 3. And we'll set that to Mabel.

03:42

So now we can use template once again. And we can say x for person in people. And then we can go ahead and output that person's name by using x text.

03:56

And we can just say person.name. So just access the properties on each of them objects as we normally would. So now what we're going to do is instead

04:06

of just using a loop like this, we're also going to bind in a key for each of these. Now a key is anything that uniquely identifies each of the things you are iterating through.

04:21

Now in this case, we have IDs for each of these people, which should be unique. So we're going to go ahead and bind in person.id. Let's take a look at this.

04:30

And as you can see, nothing has changed whatsoever. But what this has given Alpine is a unique reference to each of these people. So if things update, e.g. if the UI updates in any way,

04:44

it knows the unique position, if you like, of each of these things and knows how to reorganize on update. Now this is really hard to explain.

04:53

So what we're actually going to do is we're going to look at a more practical example of this down here. And we're going to have a list of people who have scores.

05:02

So let's just start this out completely from scratch. And then we'll bring our key in, which we should always be using. But we'll see how this works if we don't include the key.

05:10

So this is quite interesting just to see what can go wrong if we don't use key. So let's create some x data out in here. We'll have a very similar setup here.

05:20

We'll have a list of people in here. And they will all be objects. For this, we're going to have a unique identifier. We're going to have a name for each of these people.

05:30

But we're also going to have how many points they have. So let's set this as 1. Let's come down and let's change this to Billy, id of 2. And let's set the points here to, say, 10 or 100.

05:44

And then we'll have just a third one. So we'll just keep 3 in here. But in reality, the list, of course, could be a lot longer. So in here, we'll set the points to 5.

05:53

So what we want to do is iterate through each of these people and output their points next to them. Pretty straightforward, because we already know how to iterate through and extract this information out.

06:04

So let's say person in people. And let's go and create a div out in here. Let's create a span with the user's name, or the person's name.

06:15

And then let's put the points in brackets. So again, we're going to use a span inside of here. Don't think my editor will let me do that. So let's just manually output that.

06:25

And let's say, xtext person.points. And then just put points at the end. OK, so let's go over and check this out. There we go.

06:36

Alex, 1 point, 100 points, and 5 points. Now, just as a kind of contrived example, let's just say that we had a button here that allowed us to increment the points for each people

06:47

or for each person. So we're going to go ahead and say x on click. And let's go and say increment points. And we'll call a method over on xdata

06:57

for that particular person based on their ID. So inside of our data, let's create this method out now that will increment this for us. And we'll get this working.

07:08

Increment points. And let's take the ID into there. And then let's go ahead and say this people find. Find that by the person's ID.

07:21

So p.id equals the ID that we've passed in. That will return to us the user object matched by that ID. And then let's increment the points for that person. Let's just see if this works, first of all.

07:36

And it does. You can see I can increment each of these people's points. But now let's talk about the importance of adding a key. Now let's just say that we wanted to iterate through

07:47

an ordered by list in terms of points. So we're actually going to introduce a JavaScript getter here, which allow us to access this as not a method. So we can just call this like a property.

07:59

So we're going to call this people sorted by points. So this will just return exactly the same array, but sorted by their points. So we're going to order them.

08:10

So to do this, we're going to return this people. We're going to go ahead and use sort on this array. And this will take in a and b. I'm just going to call it a and b.

08:19

And we can use these to compare. So we're just going to say a.points minus b.points. Now don't worry too much if you don't understand the background behind this.

08:28

This is just how we sort things in JavaScript. But this is going to return to us sorted by our points. What we can now do is switch this over here. So we can say people sorted by points instead.

08:40

If that was an actual method, rather than using get, you would have to invoke this. But instead, we've used get here, which means that we can just call this like a property.

08:50

Let's go over and try this out. OK, so it's not quite working. Let's have a look here. Unexpected identifier.

08:55

We've probably not included a comma. And there we go. So this is now ordered by lowest points at the top to highest points at the bottom.

09:05

We can switch this around by changing b.points first. And that's going to order it in the opposite order. So we're going to try and fiddle this now so it goes wrong based on us not having the key in there

09:19

to keep track of things. This can be quite difficult because it really depends on what you're doing. But let's bump Alex's points up to six.

09:27

And then let's maybe bump Mabel's points up to six, Alex's points up, and maybe push Mabel up a bit. And then maybe push Mabel up again. There we go.

09:37

Did you see? What I did was I incremented Mabel's points that time, but Alex's points actually incremented. Now, the reason for this is Alpine can't keep track

09:47

of the position of Mabel and Alex. So when I clicked increment on Mabel, not only did Mabel's points go up, but Alex's points went up as well.

09:56

Let's try and replicate this again. So I'm going to push this up to, say, six. So they swap places. Push Mabel up to six, then push Alex up.

10:06

And there we go. So we kind of get the idea of how this is not working. Let's bring our key in there and see if we can replicate this functionality

10:16

now that Alpine can kind of work out where this person is in the list by their unique ID. So let's go over and try this out again. So I'm going to go ahead and bump Alex's points up to six.

10:27

And that looks like it's working now. So previously, when we hit increment, when Mabel had been pushed up, Alex's points got incremented as well.

10:37

But you can see now these are just truly unique from each other. It's not giving us the same issue that we saw before. So really difficult to replicate,

10:46

but hopefully that's given you, in a long-winded way, the benefit of having a key in there. So remember, whenever you iterate through a list in Alpine, make sure you include the key with some unique identifier.

Episode summary

In this episode, we dive deep into the world of iteration in Alpine.js. We start off with the basics—using x-for to loop through simple arrays like numbers and fruits—getting comfortable with creating lists and accessing the current item and its index. You'll see how you can structure the output with different HTML elements, like lists or divs, depending on the UI you want.

Then, we crank things up by iterating over arrays of objects, which is way more common when you're working with data from APIs. We look at how to access object properties during each iteration and why you need to use a unique key attribute when outputting lists. This leads to a demonstration of what can go wrong if you skip using a key: when sorting and updating a list (like incrementing points for users), Alpine can get mixed up about which item is which, resulting in the wrong values being updated or swapped.

Luckily, adding a key based on something unique (like an ID) fixes all these weird behaviors. The video wraps up by showing how this subtle requirement prevents all sorts of UI bugs, making your reactive lists work smoothly.

Takeaway: Always use a unique key when looping over items in Alpine.js if your list might update or change order! It saves you from some sneaky, hard-to-debug issues.

Episode discussion

No comments, yet. Be the first!