Basic Usage: Loops

Loops

Transphporm supports iterating over arrays and data sets using the repeat property. You can read each value using the iteration() function in the same way you can use the data() function.

For example, consider the following data structure that stores a list of films and their directors:

$data = [
'films' => [
[
'name' => 'Pulp Fiction',
'director' => 'Quentin Tarantino'
],
[
'name' => 'Jaws',
'director' => 'Steven Spielberg'
],
[
'name' => 'Titanic',
'director' => 'James Cameron'
]
]
];

Transphporm can iterate over the list using the following code:

ulli {repeat:data(films); content:iteration(name); }

Which given the following HTML:

<ul>
<li>A list item</li>
</ul>

Will generate:

<ul>
<li>Pulp Fiction</li>
<li>Jaws</li>
<li>Titanic</li>
</ul>

Note the use of the iteration() function to read the element for the current iteration. The targetted node (li) is repeated for each element in the films array thanks to the repeat: data(films) property. It's then possible to reference each iterated value using the iteration function, which like the data function takes an argument for the property to read.

Repeating complex nodes

In the example above, the element being repeated contains a single text node. However, it's possible to repeat any node even if it contains child nodes. For example:

<ul>
<li>
<h3>Title</h3>
<p>Director</p>
</li>
</ul>

Using the following TSS:

ulli {repeat:data(films); }

Will repeat the node for each film:

<ul>
<li>
<h3>Title</h3>
<p>Director</p>
</li>
<li>
<h3>Title</h3>
<p>Director</p>
</li>
<li>
<h3>Title</h3>
<p>Director</p>
</li>
</ul>

However, this has just repeated each node. Here, we also want to write data into each child node. That's possible using the following TSS:

ulli {repeat:data(films); }
ullih3 {content:iteration(name); }
ullip {content:iteration(director); }

Which will generate the HTML

<ul>
<li>
<h3>Pulp Fiction</h3>
<p>Quentin Tarantino</p>
</li>
<li>
<h3>Jaws</h3>
<p>Steven Spielberg</p>
</li>
<li>
<h3>Titanic</h3>
<p>James Cameron</p>
</li>
</ul>

This is because the iteration() function is available on any child node of the element which has a repeat property set.

Associative arrays

Transphporm can also read the key of associative arrays using the key() function. Note: The key function never takes any arguments

Consider the following:

$data = [
'films' => [
'Pulp Fiction' => [
'year' => '1994',
'director' => 'Quentin Tarantino'
],
'Jaws' => [
'year' => '1975',
'director' => 'Steven Spielberg'
],
'Titanic' => [
'year' => '1997',
'director' => 'James Cameron'
]
]
];

In this data structure, the film's name is the array key. You can print the key along with the iterated data.

HTML

<ul>
<li>
<h2>Title</h2>
<h3>Year</h3>
<p>Director</p>
</li>
</ul>

TSS:

ulli {repeat:data(films); }
ullih2 {content:key(); } /* Note the use of key() instead of iteration() to read the array key */ullih3 {content:iteration(year); }
ullip {content:iteration(director) ;}

Which when put together using this PHP code:

$template = new \Transphporm\Builder($xml, $tss);
echo$template->output($data)->body;

Will print:

<ul>
<li>
<h2>Pulp Fiction</h2>
<h3>1994</h3>
<p>Quentin Tarantino</p>
</li>
<li>
<h2>Jaws</h2>
<h3>1975</h3>
<p>Steven Speilberg</p>
</li>
<li>
<h2>Titanic</h2>
<h3>1997</h3>
<p>James Cameron</p>
</li>
</ul>

Simple one dimensional arrays

Transphporm also supports simple one dimensional arrays. Consider the following:

$prices = [
'Apple' => '0.5',
'Pear' => '0.6',
'Melon' => '1.2'
];
$template->output($prices);

These can also be used with a basic repeat command using key() to read the array key an iteration() without any arguments to read the value.

HTML

<table>
<thead>
<tr>
<th>Fruit</th>
<th>Price ($)</th>
</tr>
</thead>
<tbody>
<tr>
<td>name</td>
<td>price</td>
</tr>
</tbody>
</table>

TSS:

tbodytr {repeat:data(); }
tbodytd:nth-child(1) {content:key(); }
tbodytd:nth-child(2) {content:iteration(); }

Which will generate

<table>
<thead>
<tr>
<th>Fruit</th>
<th>Price ($)</th>
</tr>
</thead>
<tbody>
<tr>
<td>Apple</td>
<td>0.5</td>
</tr>
<tr>
<td>Pear</td>
<td>0.6</td>
</tr>
<tr>
<td>Melon</td>
<td>1.2</td>
</tr>
</tbody>
</table>

Note the use of repeat: data() to loop through the entire prices array rather than reading a specific key.

This example uses :nth-child() to select each td. To see a list of available CSS selectors please check the CSS Selectors page