06 - Loops

The previous chapter wrote two Todo rows by hand. Now render every item in todos with one repeated <li>.

Code

<script src="/sercrod.js"></script>

<serc-rod data='{"todos":[{"title":"Buy milk","done":false},{"title":"Pay bills","done":true}]}'>
	<h2>Todo</h2>
	<ul>
		<li *for="todo of todos">
			<span *if="todo.done">[x]</span>
			<span *else>[ ]</span>
			<span>%todo.title%</span>
		</li>
	</ul>
</serc-rod>

How to read the loop

*for="todo of todos" repeats one <li> for each item.
todo.title is the current Todo title.
todo.done controls the [ ] or [x] marker inside each row.
No new Todo is added yet. This chapter focuses only on replacing repeated markup with a loop.

Result

Todo [x] [ ] %todo.title%

The next step will add new Todos from the draft input.

Previous: Conditions

Next: Add items

Back to Tutorial index