Template dynamic field / key name


#1

I’m having problems when accessing a subobject within a Meteor collection dynamically. Let´s say that each document within the collection has the ‘white’, ‘black’ and ‘red’ property.

_id: 123456
propA: 'xxx',
white: {
     prop1: 'aaa',
     prop2: 'bbb',
     prop3: 'ccc´
    },
black: {
     prop1: 'ddd',
     prop2: 'eee',
     prop3: 'fff'
    },
red: {
     prop1: 'ggg',
     prop2: 'hhh',
     prop3: 'iii'
    }

Then the user profile has a favourite color property that matches ‘white’, ‘black’ or ‘red’.

How could I render one property within one of those collections dinamically depending on the user’s favourite color?

I was trying to do something like this (but it is not working):

{{#each collection}}
 {{this[Meteor.user().profile.favouriteColor].prop1}}
{{/each}}

where collection comes from the template helper, it just does a Collection.find();

Maybe I should rethink my data model and create different collections for ‘white’, ‘black’ and ‘red’ and subscribe to the corresponding collection? As I’m not finding any other question or people having the same problem it makes me think that I may be following the wrong approach…

Thanks in advance


#2

My first stab would be to use a template helper to return the extracted value instead


#3

i think you might need to use color=Meteor.user().profile.favouriteColor and then {{this[color].prop1}}


#4

Thanks for your suggestions

  1. Adding this as a Helper didn’t help. Actually what happened is that {{this[color].prop1}} rendered as [object Object]. The point is that also {{this[‘red’].prop1}} returns [object Object] so it seems the way Spacebars handles objects is not as one would expect. On the other hand {{this.red.prop1}} works perfectly, as expected

SOLUTION
2) Creating a Helper which receives both the object and the property name worked!

HTML
{{getColorProperty this 'prop1'}}

JS
Template.test.helpers({
 'getColorProperty': function(obj, prop) {
      return obj[Meteor.user().profile.favouriteColor][prop];
 }
})

I still wonder why the 1) approach did not work, anyway, at least now it is working.

Thanks!