Iterating through your data

3. Lesson of RiotJS

Looping was never easier. You don't even have to think about a way how to get data displayed as HTML via Javascript or call any rendering methods. Nope - all part of Riots magic.

Martin Muzatko Written by Martin Muzatko


In the previous lesson, you have learnt that the data is all that you have to care about. Lets have a look on what kind of data we would want to display in Riot.

In our example: A list of users

this.users = ['John', 'Jake', 'Jayson', 'Jenny', 'Jessica']

To output this list, we can simply use the each HTML attribute, that riot evaluates to foreach, creating an element for each item of your array

<div each={user in users}>
<script type="riot/tag"> <riot-users> <div each=\{user in users\}> \{user\} </div> this.users = ['John', 'Jake', 'Jayson', 'Jenny', 'Jessica'] </riot-users> </script> <riot-users></riot-users>

Unlike usual Javascript for in loops (see docs), this does not return the key of the user, but the value. If we want to show the key, we can use a second variable. Usually you have to obtain the value this way: for (var user in users) { users[user] }

Riot does offer help by using two variables in front of in, instead of just one. Like so:

<div each={user, key in users}>
    {key} - {user}
<script type="riot/tag"> <riot-users2> <div each=\{user, key in users\}> \{key\} - \{user\} </div> this.users = ['John', 'Jake', 'Jayson', 'Jenny', 'Jessica'] </riot-users2> </script> <riot-users2></riot-users2>

Right now this list is not really that fascinating, so let us give these users some attributes - they become an object

<div each={user, key in users}>
    {key} - {} is {user.age} years old
this.users = [
    {name : 'John',     age : 20},
    {name : 'Jake',     age : 37},
    {name : 'Jayson',   age : 18},
    {name : 'Jenny',    age : 35},
    {name : 'Jessica',  age : 23}
<script type="riot/tag"> <riot-users3> <div each=\{user, key in users\}> \{key\} - \{\} is \{user.age\} years old </div> this.users = [ \{name : 'John', age : 20\}, \{name : 'Jake', age : 37\}, \{name : 'Jayson', age : 18\}, \{name : 'Jenny', age : 35\}, \{name : 'Jessica', age : 23\} ] </riot-users3> </script> <riot-users3></riot-users3>

Note: You can also loop through an object, which has some minor performance issues (as described in the riot guide). Although note that key and value are reversed. Where you would write user, key in an array-loop, you write key, value in an object-loop. When to choose which is up to the usecase.

Riot Resources

Official Riot Guide on Loops:
Riot Cheatsheet:

Do you need inspiration how to solve those tricky issues? Issues that when resolved once and for all, would ease a lot of daily user interface interaction.

Get on my list! You are invited to reply to any email with your important questions and get a hand-crafted reply with hands-on guides. You will learn how to solve your individual use-cases. Fill in your name below and get in touch today :) . It is about a nice conversation from developer to developer after all.

Previous Lesson

Tag Lifecycle

There are a few event listeners we can listen to. Here is what they do and how to react.

Next Lesson

Filtering Outputs

Conditionals are very easy to implement. With the power of inline conditions, you can quickly filter your data.

See all Lessons