• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

I Like Kill Nerds

The blog of Australian Front End / Aurelia Javascript Developer & brewing aficionado Dwayne Charrington // Aurelia.io Core Team member.

  • Home
  • Aurelia 2
  • Aurelia 1
  • About
  • Aurelia 2 Consulting/Freelance Work

Iterating Objects Using Repeat.for In Aurelia

Aurelia 1 Tutorials · August 28, 2015

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.

Dwayne

Leave a Reply Cancel reply

10 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Vladimir
Vladimir
6 years ago

At official docs page I’ve found this sample in cheat sheet section:
Render an map with a template.
HTML

${id} ${customer.fullName}

I just wonder what ‘customers’ model should look like, for this sample to work? I’ve tried this one:
customers = {
‘id00’: { fullName: ‘name1’ },
‘id01’: { fullName: ‘name2’ }
};
but got
TypeError: Cannot read property ‘getCollectionObserver’ of null
in console

0
Mike
Mike
6 years ago

No mention of how to access the index of the iterator?

0
Jeff Grann
Jeff Grann
6 years ago

Very nice post. I’m trying it out but can’t quite get it to work.

I created an object-keys-value-converter.js file in my source directory with:

export class ObjectKeysValueConverter {
toView(obj) {
let temp = [];

for (let prop in obj) {
if (obj.hasOwnProperty(prop)) {
temp.push(obj[prop]);
}
}

return temp;
}
}

Then in an email.html file:

${label}

Show Email Address

In the email.js file:

…..
emailAddresses = {home: “”}
…..

But no email fields display in the browser.

0
Jeff Grann
Jeff Grann
6 years ago

The email.html file didn’t render correctly. Trying it again:

“`

${label}

Show Email Address

“`

0
Jeff Grann
Jeff Grann
6 years ago

Okay. I have no idea how to add html to these comments. So here’s the relevant snippet:

repeat.for=”label in emailAddresses | objectKeys”

0
Jeff Grann
Jeff Grann
6 years ago

Figured it out. “in” should be “of”:

repeat.for=”label of emailAddresses | objectKeys”

0
Kristian Mandrup
Kristian Mandrup
5 years ago

Could you please create a ValueConverter to convert the object into an Array where each value is an Object with key and value properties.
Cheers!

0
Abraham
Abraham
5 years ago

Hi Dwayne, good idea to have the ObjectKeys and ObjectValues converter, very handy.

Looks like your two code publish should be other way around.
The ObjectKeysValueConverter doing what the ObjectValuesValueConverter

Also for the ObjectKeysValueConverter can be done in one line using
Object.keys(obj);

0
John Stephenson
John Stephenson
4 years ago

Hi,
Just trying this but (unless I’m mistaken) it doesn’t have functional parity with the viewmodel maintained array. If you add an item to the array the view will update. If you add a new key to the object (for me at least) it’s not refreshing the view. I have to replace the object.
John

0
Nick Seidenman
Nick Seidenman
1 year ago

BRILLIANT! This is EXACTLY what I was looking for.

0

Primary Sidebar

Popular

  • Testing Event Listeners In Jest (Without Using A Library)
  • How To Get The Hash of A File In Node.js
  • Web 3.0 may have died before it even started
  • Smoke Detector Randomly Goes Off Early Hours of The Morning
  • NBN Box Installed Inside of Garage, Where Do You Put The Modem?
  • How to Copy Files Using the Copy Webpack Plugin (without copying the entire folder structure)
  • How To Install Eufy Security Cameras Without Drilling or Using Screws
  • How To Calculate A Javascript Date X Months Ago With Vanilla Javascript
  • How to Use Neural DSP Archetype Plugins With the Quad Cortex
  • Which Neural DSP Archetype Plugins Should You Buy?

Recent Comments

  • Casey Milne on A List of WordPress Gutenberg Core Blocks
  • Jay on Neural DSP Reveal Details About the Long-Awaited Quad Cortex Desktop Editor
  • john on Deno Raises $21M – but is anyone using it yet?
  • Oranges on How To Store Users In Firestore Using Firebase Authentication
  • Precious on Fixing Sequel Pro SQL Encoding Error For Imported SQL Files

Copyright © 2022 · Dwayne Charrington · Log in

wpDiscuz