How to process and display nested hasMany data relationships in Ember

Question

Problem:

I can't figure out how to process and then display nested Ember Data Records in a Component.

I don't know how others approach this problem and if I am missing something crucial about Ember which is preventing the problem. I think there might be a weird logical impossibility happening with the way I'm using promises as obviously don't understand them well enough.

Background:

I am building a web-app for a sports competition. Competitions are broken down into days which have events. Athletes compete in these events, and their performance data is stored in records —notably the points scored—.

I need to display a scoreboard for a given day. The scoreboard is essentially a table of the athletes scores for each event in that day. For example: What I've tried:

• Implementing similar logic in the controller in numerous different ways.
• Tried moving the logic to the route but have had similar troubles.
• Scouring the internet.
• Rebuilding.

Controller code (The flawed logic):

app/components/data-entry-interface/day/scoreboard-interface-row.js

export default Component.extend({
  store: Ember.inject.service(),
  tagName: '',
  eventScores: Ember.computed('day.events.@each.records.@each.{points,athlete.id}', async function () {
    let day = this.get('day');
    let eventScoresPromises = await day.get('events').map(async event => {
      let recordsPromises = await event.get('records').map(record => record);
      let records = await Promise.all(recordsPromises);
      return await records
        .filter(record => record.get('athlete.id') === this.get('athlete.id'))
        .map(record => record.get('points'));
    });
    return await Promise.all(eventScoresPromises);
  }),
});

Route managment code (just for reference):

app/router.js

Router.map(function () {
  this.route('competition-list-interface');
  this.route('data-entry-interface', {
    path: '/data-entry-interface/competition/:competition_ID'
  }, function () {
    this.route('day', {
        path: '/day/:day_ID'
      },
      function () {
        this.route('scoreboard-interface', {
          path: '/scoreboard'
        });
      });
  });
});

app/routes/data-entry-interface.js

async model(params) {
    let competition = await this.store.findRecord('competition', params.competition_ID);
    let days = await competition.get('days');
    return {
      competition: competition,
      days: days,
    }
  }

app/routes/data-entry-interface/day.js

async model(params) {
    let day = await this.store.findRecord('day', params.day_ID);
    let competition = this.modelFor('data-entry-interface').competition;
    return {
      day: day,
      athletes: competition.athletes,
      competition: competition,
    }
  }

app/routes/data-entry-interface/day/scoreboard-interface.js

model() {
    let competition = this.modelFor('data-entry-interface').competition;
    let day = this.modelFor('data-entry-interface/day').day;
    let athletes = competition.get('athletes');

    return Ember.RSVP.hash({
      competition: this.modelFor('data-entry-interface').competition,
      day: this.modelFor('data-entry-interface/day').day,
      athletes: athletes,
    });
  },
  setupController(controller, model) {
    controller.set('model', model);
  }

Templating code (just for reference):

app/templates/data-entry-interface/day/scoreboard-interface.hbs

<table class="table table-hover table-striped table-bordered">
<thead>
<tr>
  <td>Athlete {{model.scoreBoardRows}}</td>
  {{#each model.day.events as |event|}}
    <td>Points for event: {{event.name}}</td>
  {{/each}}
  <td>Total points for day {{model.day.number}}</td>
  <td>Positions for day {{model.day.number}}</td>
</tr>
</thead>
<tbody>
{{#each model.athletes as |athlete|}}
  {{data-entry-interface/day/scoreboard-interface-row athlete=athlete day=model.day}}
{{/each}}
</tbody>

app/templates/components/data-entry-interface/day/scoreboard-interface-row.hbs

<tr>
    <td>{{athlete.name}}</td>
    {{#each eventScores as |eventScore|}}
        <td>{{eventScore}}</td>
    {{/each}}
    <td>{{totalPointsForDay}}</td>
    <td>{{overallPositionForDay}}</td>
</tr>

Technical details:

• Using FireBase to store the data and host the site. I'm using the EmberFire (V2.0.9) library for the CRUD operations which works with the inbuilt normal EmberData library (V3.1.0)
• EmberCli is version V3.1.4 and EmberSource is version V3.1.0

Research I've done:

• A similar question except they are simply displaying nested data
• A post which seems to be almost exactly what I need but doesn't seem to work for me
• A post explaining promises for similar a similar problem

Answer 1

There's an issue with your computed function in your controller. To quote from the Ember docs regarding aggregate computed properties "Note that @each only works one level deep. You cannot use nested forms like todos.@each.owner.name or todos.@each.owner.@each.name." See the Ember docs here: https://guides.emberjs.com/v3.1.0/object-model/computed-properties-and-aggregate-data/#toc_code-each-code.

Beyond that error, what you have seems to make sense... although I've not used the async model() approach before to know whether that might also creating complications. ember-concurrency might be a good option to give you more control over your data.