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
on

intro

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

JAVASCRIPT
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

RIOT
<div each={user in users}>
    {user}
</div>
<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:

RIOT
<div each={user, key in users}>
    {key} - {user}
</div>
<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

RIOT
<div each={user, key in users}>
    {key} - {user.name} 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}
]
<script type="riot/tag"> <riot-users3> <div each=\{user, key in users\}> \{key\} - \{user.name\} 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: http://riotjs.com/guide/#non-object-arrays
Riot Cheatsheet: martinmuzatko.github.io/riot-cheatsheet/

How do you build re-usable interactive webcomponents without wasting your precious time bending the DOM to your needs? Get my latest content about building front-end web-apps delivered directly to your inbox and get free code samples for all the components I create.

Previous Lesson

Tag Lifecycle


2. Lesson of RiotJS

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

Next Lesson

Filtering Outputs


4. Lesson of RiotJS

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

See all Lessons