Display map from promise with emberJS and handlebars

Question

I am currently struggling to display maps in emberJS/handlebars (which is new for me).

Server side, I have a command.go file with:

var Actions = map[string]string{
    "EAT": "EAT.",
    "DRINK": "DRNK",
    "SLEEP": "SLP."
}
var Keys = map[string]int{
    "KEY_q": 0,
    "KEY_w": 1,
    "KEY_e": 2,
    ...
}

Each action and key have a string constant identifier and are associated to a string or int code.

I would like to display a 2 columns table in which: - column 1 shows actions (like eat, drink, sleep, ...) - column 2 shows a dropdown list with available keyboard keys (like Q, W, E, ...), their int code being the id of the tag

I have a controller returning these maps as JSON object:

ctx.JSON(http.StatusOK, gin.H{
    "actions":      models.Actions,
    "keys": models.Keys,
})

Then I a an emberJS service, config.js, as follows:

commands: computed(function () {
    return this.get('ajax').request('<address>/command').then(result => {
        return result;
    });
}),
commandActions: computed('commands', function() {
    return this.get('commands').then((commands) => {
        return commands.actions;
    });
}),
commandKeys: computed('commands', function() {
    return this.get('commands').then((commands) => {
        return commands.keys;
    });
}),

The controller commands.js is as follows:

import Ember from 'ember';

const { computed, inject: { service } } = Ember;

export default Ember.Controller.extend({
    config: service(),

    selectedKey: '',

    actions: {
        selectKey(value) {

        },
    }
});

And finally in commands.hbs I have

<div class="table-responsive">
  <table class="table">
    <thead>
      <tr>
        <th>Actions</th>
        <th>Associated key</th>
      </tr>
    </thead>
    <tbody>
      {{#each-in config.commandActions as |key value|}}
        <tr>
          <td>{{command}}</td>
          <td>
            {{#power-select
            options=config.commandKeys
            selected=selectedKey
            allowClear=false
            searchEnabled=false
            onchange=(action "selectKey")
            as |key|
            }}
              {{key}}
            {{/power-select}}
          </td>
        </tr>
      {{/each-in}}
    </tbody>
  </table>
</div>

But nothing is displayed :(. The service works well but then in the hbs file nothing appears. I have tried different combinations of each or each-in with no success.

Could someone please help? Do I need to set variables in the controller somehow then use those variables in the hbs?

I'm using ember 2.5.

Thanks in advance

EDIT

The problem may come from the fact that I am trying to display a promise object before it is resolved. Any idea about that?

Answer 1

I think with Ember Concurrency, your service will pause until your promise resolves, then return the results you want, rather than a promise object that #each doesn't know how to iterate over.

Your service code would end up looking like this:

commands: task(function*() {
  const allCommands = yield this.get('ajax').request('<address>/command');
  return allCommands;
}),
commandActions: computed.alias('commands.actions'),
commandKeys: computed.alias('commands.commandKeys')

and your template would be happy again.

Answer 2

Thank you all for the help you provided.

We finally managed to get what we wanted by doing the following:

In config.js service:

commands: computed(function () {
    return this.get('ajax').request('<address>/command').then(result => {
        return result;
    });
}),

In command.js controller:

import DS from 'ember-data';

actions: computed(function() {
    return DS.PromiseArray.create({
        promise: this.get('config.commands').then((allCommands) => {
            let result = [];
            let actions = allCommands['actions'];

            for (var name in actions) {
                let cmd = Ember.Object.create({
                    'name': name,
                    'code': actions[name],
                });

                result.pushObject(cmd);
            }

            return result;
        })
    });
}),

Same code to get keys.

And in commands.hbs:

<tbody>
  {{#each actions as |action|}}
    <tr>
      <td>{{action.name}}</td>
      <td>
        {{#power-select
          options=keys
          selected=selectedKey
          allowClear=false
          onchange=(action 'selectKey' action)
          searchEnabled=false
          as |key|
        }}
          {{key.name}}
        {{/power-select}}
      </td>
    </tr>
  {{/each}}
</tbody>

Thanks again