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.
// A ValueConverter for iterating an Object's properties inside of a repeat.for in Aurelia
export class ObjectKeysValueConverter {
toView(obj) {
// Create a temporary array to populate with object keys
let temp = [];
// A basic for..in loop to get object properties
// https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Statements/for...in
for (let prop in obj) {
if (obj.hasOwnProperty(prop)) {
temp.push(obj[prop]);
}
}
return temp;
}
}
/**
* Usage
* Shows how to use the custom ValueConverter to iterate an objects properties
* aka its keys.
*
*
* ${prop}
*/
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.
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.
// A ValueConverter for iterating an Object's values inside of a repeat.for in Aurelia
export class ObjectValuesValueConverter {
toView(obj) {
// Create a temporary array to populate with object values
let temp = [];
// A basic for..in loop to get values
// https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Statements/for...of
for (let val of obj) {
temp.push(val);
}
return temp;
}
}
/**
* Usage
* Shows how to use the custom ValueConverter to iterate an objects values
*
*
* ${val}
*/
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.
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.