How to access Meteor user properties in an array?

Question

I am trying to learn a meteor, and I am facing several obstacles. I have several nested templates for displaying all user information in my application:

users_list.html:

<template name='usersList'> <div class='users'> {{#each user}} {{> userItem}} {{/each}} </div> </template> 

and user_item.html:

 <template name='userItem'> <div class='user'> <div class='user-content'> <h3>User:</h3> <h4>Email: {{emails}}</h4> <h5>ID: {{_id}}</h5> ... </div> </div> </template> 

and its associated template helper:

 Template.usersList.helpers({ user: function(){ return Meteor.users.find().fetch(); } }); 

This works for top-level properties, but if I try to explicitly access the .address property at index 0 in the email array by changing the above line in user_item.html:

 <h4>Email: {{emails[0].address}}</h4> 

Meteor complains:

Exception in a task with a queue: Error: it is impossible to call a non-function: [object Object] ...

This bothers me because I can do it in the console:

 var userz = Meteor.users.find().fetch(); userz[0].emails[0].address // " [e-mail] " 

Any ideas on why Meteor doesn't like this?

In addition, I thought that I might need to save the contents of the email array in a variable and repeat the same template above, except that the emails_list and email_item templates are embedded in the user_item template. It seems viable but too complicated for this use case.

Ultimately, I'm just trying to learn and implement a reasonable template for accessing and displaying the attached attributes of documents in collections. Any thoughts or recommendations would be greatly appreciated.

Answer 1

This is just a problem with your syntax, try the following:

 <h4>Email : {{emails.[0].address}}</h4> 

You need to access the first element (a property that has a value of "0") in the email array using dot syntax.

https://github.com/meteor/meteor/wiki/Using-Blaze#dotted-helpers-with-numeric-indices

You can also use this template to display a list of letters:

 (from userItem) {{> emailsList}} <template name="emailsList"> <ul> {{#each emails}} {{> emailItem}} {{/each}} </ul> </template> <template name="emailItem"> <li>Address : {{address}}</li> </template> 

I don’t think it’s too complicated (just a few templates), and with Meteor it’s very easy to do. When it’s reasonable, cut your templates into additional subtopics, this will simplify and speed up the rendering of the DOM when invalidating data.

In addition, you do not need to use selection when returning the cursor in the helper: the #each block is optimized to work directly with the cursor instead of arrays. (it will be smart enough to re-register only the changed item instead of the whole list).

Answer 2

you can check blaze documentation

For this show array in the template, you should write, as the documentation shows,

In dotted helpers, use parentheses around numeric indices, for example {{currentUser.emails. [0] .address}} instead of {{currentUser.emails.0.address}}

Good {{currentUser.emails. [0] .address}}

Bad {{currentUser.emails.0.address}}

Wiki

https://github.com/meteor/meteor/wiki/Using-Blaze