Alpine JS offers x-for loop to iterate over an array of data. You can also use x-for loop to print simple iterations on a specified range.
Simple For Loop with x-for in Alpine JS
You can iterate over a simple specified range using x-for. This will iterate only on the specified range. Here is an example below to use x-for on a specified range.
|
1 2 3 4 5 6 7 8 9 |
<ul x-data=""> <template x-for="i in 10"> <li x-text="i"></li> </template> </ul> |
This will print 10 numbers on the web page. Now, let’s see how to iterate over real data that you will get from an API.
Using x-for on Array of Objects API Data
When you are working with APIs, you probably have data as an array of objects. The example below uses an array of users and prints the name of each user.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<div x-data='{users: [ { id:1, name: "John Smith", email: "john@example.com" }, { id:2, name: "David Adam", email: "david@example.com" }, { id:3, name: "James Norison", email: "james@example.com" }, ]}' x-cloak class="relative inline-block" > <template x-for="user in users"> <p x-text="user.name"></p> </template> </div> |
How to Access the index in x-for loop
You can access the index inside x-for loop with a slight change in syntax. The following example illustrates how to use an index.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<div x-data='{users: [ { id:1, name: "John Smith", email: "john@example.com" }, { id:2, name: "David Adam", email: "david@example.com" }, { id:3, name: "James Norison", email: "james@example.com" }, ]}' x-cloak class="relative inline-block" > <template x-for="(user, index) in users"> <p x-text="index + ' '+user.name"></p> </template> </div> |
The above example will display names with indexes.
Specifying Key in x-for loop in Alpine JS
When working with modern frameworks, specifying a key while iterating is required. You can add a key with :key attribute inside x-for loop. It is not recomended to use index as a key because it may cause issues in the web page as multiple items will get same key. The following example explains how to specify a key in x-for iterations.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<div x-data='{users: [ { id:1, name: "John Smith", email: "john@example.com" }, { id:2, name: "David Adam", email: "david@example.com" }, { id:3, name: "James Norison", email: "james@example.com" }, ]}' x-cloak class="relative inline-block" > <template x-for="(user, index) in users" :key="user.id"> <p x-text="index + ' '+user.name"></p> </template> </div> |
Using x-if Inside x-for in Alpine JS
You can use x-if inside x-for with another template. The following example ilustrates how to use x-if in alpine JS. You can also specify multiple if conditions inside x-for.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<div x-data='{users: [ { id:1, name: "John Smith", email: "john@example.com" }, { id:2, name: "David Adam", email: "david@example.com" }, { id:3, name: "James Norison", email: "james@example.com" }, ]}' x-cloak class="relative inline-block" > <template x-for="(user, index) in users" :key="user.id"> <template x-if="index<=1"> <p x-text="user.name"></p> </template> </template> </div> |
Conculsion
Alpine JS offers x-for loop to iterate over an array which helps to display a template in the web page. By using x-for loop, you can get rid of copy pasting the same code again and again. You can read more about x-for on official documentation of alpine JS.