BlazeJS loop roles in default-group


#1

Hi all,

I try #each of Spacebar to display all roles a users are in. But the following code makes the Template not recognise by Meteor build.

Please advice, thank you.

{{#each role in outletEmployeeData.roles.default-group}
    <div class="ui label">
        {{role}}
    </div>
{{/each}}

#2

That’s not a valid JavaScript identifier. Have you tried outletEmployeeData.roles['default-group']?


#3

Hi,

I change it to the following and it still break Meteor build:

{{#each role in outletEmployeeData.roles['default-group']}
    <div class="ui label">
        {{role}}
    </div>
{{/each}}

#4

Can you share your complete template and helper?


#5
Template.outletEmployeeItem.helpers({
    outletEmployeeData: function () {
        let outletEmployeeData = Template.instance().outletEmployeeData.get("outletEmployeeData");
        return outletEmployeeData;
    }
});

“outletEmployeeData” is ReactiveDict. The data are from Collection Find.

The following is the template:

<template name="outletEmployeeItem">
    <tr>
        <td>{{outletEmployeeData.firstName}} {{outletEmployeeData.lastName}}</td>
        <td>
            {{#each role in outletEmployeeData.roles['default-group']}
            <div class="ui label">
                {{role}}
            </div>
            {{/each}}
        </td>
        <td class="center aligned">
            {{checkSuspend employee.employee_id}}
        </td>
        <td class="center aligned">
            {{> outletEmployeeActionButton employee=employee}}
        </td>
    </tr>
</template>

#6

Try the following template which minimises the re-use of the helper and also restructures the each:

<template name="outletEmployeeItem">
  {{#let outletData=outletEmployeeData}}
    <tr>
      <td>{{outletData.firstName}} {{outletData.lastName}}</td>
      <td>
        {{#let roles=outletData.roles['default-group']}}
          {{#each role in roles}}
          <div class="ui label">
            {{role}}
          </div>
          {{/each}}
        {{/let}}
      </td>
      <td class="center aligned">
        {{checkSuspend employee.employee_id}}
      </td>
      <td class="center aligned">
        {{> outletEmployeeActionButton employee=employee}}
      </td>
    </tr>
  {{/let}}
</template>

However, I think you may need to do something similar with employee.


#7

Thanks, will try it now and post update here. Thanks again.


#8

I try use the template you provide above, I get the following error which is the same as previous:

Uncaught Error: Cannot find module './outletEmployeeItem.html'

Sorry for the trouble. Not sure how to fix this.


#9

As my previous Spacebar error, when I comment out the “role” #each Spacebar, there are no more error.

Same when I comment out the following part of the template:

{{#let roles=outletData.roles['default-group']}}
    {{#each role in roles}
        <div class="ui label">
            {{role}}
        </div>
    {{/each}}
{{/let}}

This is the part that cause the error.


#10

You’ve not shared that error before. That looks like you’ve imported it incorrectly in the client .js file.


#11

There’s a missing } in that line. My fault - sorry. Coding in the browser’s never a good idea!


#12

Hi, true that it looks like missing correct import of template. But that error doesn’t exist when comment out the role part in the template.

So that’s what I mean by it break the template.


#13

I added the missing } but the error is exactly the same.


#14

Can you share an exampleoutletEmployeeData document?


#15
{
     "firstName":"User  02",
     "lastName":"Sample",
     "roles":
          {"default-group":["appuser"]}
}

Here, thanks.


#16

As an alternative way to achieve what I need, I created a new “roles” helper that show roles without error:

roles: function () {
        let outletEmployeeData = Template.instance().outletEmployeeData.get("outletEmployeeData");
        let defaultGroup;
        if (outletEmployeeData) {
            defaultGroup = outletEmployeeData.roles['default-group'];
            console.log(defaultGroup);
            return defaultGroup
        }
    }

But I really hope I can understand and get the initial solution work.


#17

One thing for sure is this line in Spacebar cause error. Need the correct code for this line.


#18

Yes. I’m sure that worked for me before now, but it’s been a while.

It looks like [] is not allowed. That means you must either have a dedicated helper (as you have got working) or change the default-group to something like default or default_group. Either of those will work with standard object syntax: outletData.roles.default or outletData.roles.default_group.


#19

Ok, thanks again for the info. I’ll just use the dedicated helper for now. Maybe I’ll change the group name in later stage.

Thanks again, very much appreciate your help.