遍历对象属性

Question

In my aurelia app, I need to display a list of elements. For performance reasons, these elements are stored as a javascript object instead of an array. That is what the object looks like :

var x = {
    0 : {...},
    3 : {...},
    5 : {...},
}

Here is the part of the template where I display these elements :

<template>
    <ul>
        <li repeat.for="property of object | ObjectToArray">
            ${ property.text }
        </li>
    </ul>
</template>

As you can see, I'm currently using a value converter to be able to iterate over my object properties. The value converter simply converts the object to an array :

export class ObjectToArrayValueConverter {
    toView(data : {[key : string] : any}) : any[] {

        var array = [];

        for (var key in data) {
            array.push(data[key]);
        }

        return array;
    }
}

This solution works very well as long as properties do not get removed or added to the object after the list has been rendered for the first time. The reason is that the value converter only gets called once. In my case, however, I need my list to stay up to date whatever happens.

I know I could create a function that could be manually called every time the object is modified, but that would add some unwanted complexity in business logic.

Is there an aurelia functionality that coud help me achieve what I want ? I could not find any help in the docs. Thank you !

Answer 1

You can get the keys using Object.prototype.keys and call Array.prototype.map on it to get an array every time you want to list it out.

var obj={...}; //Object with many keys
var genArray = Object.keys(obj).map(function(key){return obj[key];})


//Using as a function
function getKeysAsArray(obj){
    if(!obj){
        return [];
    }
    return Object.keys(obj).map(function(key){return obj[key]});
}

Answer 2

There's an easier strategy, as shown in the docs :

export class KeysValueConverter {
  toView(obj) {
    return Reflect.ownKeys(obj);
  }
}

Usage:

<p repeat.for="greeting of friends | keys">${greeting}, ${friends[greeting].name}!</p>