mercredi 14 novembre 2018

Iterating through key-values in ember.js handlebars template

I have a javascript object

this.attributes = {
            key: value,
            // etc..
        }

I would like to iterate through it and output key:value

Here is my solution:

import Ember from 'ember';

export default Ember.Component.extend({
init() {
    this._super(...arguments);
    this.attributes = {
        'SKU': '123',
        'UPC': 'ABC',
        'Title': 'Hour Glass'
       }

},

ProductAttributes: Ember.computed('attributes', function() {

    var attribs = this.get('attributes');
    var kvp = Object.keys(attribs).map(key => {
        return {
            'attribute_name': key,
            'attribute_value': attribs[key]
        };
    });
    return kvp;
})});

The template I came up with:


     : 


I am not happy with this solution since it looks cumbersome: first I convert object into an array of auxiliary objects with non-dynamic keys attribute_name and attribute_value, and then I references non-dynamic names directly within my template.

It works fine but is there a better way of doing this?




Aucun commentaire:

Enregistrer un commentaire