Iterating Objects Using Repeat.for In Aurelia

In Aurelia we already have the power to iterate arrays from within our views and for most purposes, this is fine. However, sometimes there are situations where we might want to iterate an object’s properties or values without needing to normalise it into an array.

In the Aurelia Gitter chat, this question came up, so I decided to create a couple of custom ValueConverters to help with iterating Objects like they were arrays. Other than including the Value Converters themselves, you don’t need to change anything else.

Iterating Object Properties

This first Value Converter will allow us to iterate over an Object’s properties aka its keys.

Using the above embedded Gist, lets iterate a fictional Object we have created in our ViewModel.

export class ViewModel {
    constructor() {
        this.myObj = {
            keyOne: 'myValue1',
            keyTwo: 'myValue2',
            keyThree: 'myValue3',
            keyFour: 'myValue4',
        };
    }
}

Now within our View:
The following is very simple. We will start out by iterating our Object, but we will use our custom ValueConverter to create an Array on the spot with our property values. You could easily do this within your ViewModel without using a Value Converter, but the benefit of this is that we don’t need to add any unnecessary code to our ViewModels.

<template>
<require from="ObjectKeysValueConverter"></require>

<ul>
    <li repeat.for="prop of myObj | objectKeys">${prop}</li>
</ul>
</template>

Iterating Object Values

Lastly, we are going to iterate an Object’s values. Above we iterated an Object’s keys, it is pretty self-explanatory what its values are.

We are going to re-use the same fictional ViewModel and Object from above to save time. The difference being the Object’s values will be displayed, not its properties.

export class ViewModel {
    constructor() {
        this.myObj = {
            keyOne: 'myValue1',
            keyTwo: 'myValue2',
            keyThree: 'myValue3',
            keyFour: 'myValue4',
        };
    }
}

Now within our View:
No explanation is needed, same deal as above. Just watch and learn. As you can see below the only difference is we are using our other Value Converter called, “objectValues” and changing “prop” to “val” in our repeater statement.

<template>
<require from="ObjectValuesValueConverter"></require>

<ul>
    <li repeat.for="val of myObj | objectValues">${val}>
</ul>
</template>

Conclusion

Honestly, that’s it. As you can see ValueConverters allow us to change how data is rendered not only within a normal context, but within things like repeaters. This allows the ViewModel to keep the data standardised and allow the View to dictate how it should be displayed.

If you have any questions or spot any issues with the code, as always, please leave a comment.