Manipulating ember data in component

Questions General
1

Hi everyone!

I’m learning ember (v3.15) and I’ve been batling with an issue for the last couple of days that I can’t solve . My problem is sorting a list of ember data records inside a component.

I’m trying to build a calendar component (a simple table) that displays my vacations for the entire year. To do this, I use ember-data to retrieve the list of dates (each record has a startDate and endDate) with my vacations in the routes model(): route

The list of dates is passed to the component like so (the argument is @vacationsList):

<Vacations::VacationsEditor @count={{this.model.count}} @vacationsList={{@model.dates}} @addNewVacationDate={{this.addNewVacationDate}} @updateCounter={{this.updateCount}} />

So far so go. I can display the list inside my component using {{@vacationsList}}.

The issue comes when I try to modify the records list. To generate the table, I need to sort the records by the startDate property (among other things) and I can’t find a way to do this that works.

I created a computed property to iterate over the records and return something that the component can use but the console.log() statement is never executed. I assume this is because I’m working with a promise?

@computed

get months(){
    this.args.vacationsList.forEach(x => {console.log(x);});
    let months = [];
    return months;
}

Another thing I’ve tried was using the @sort() computed property in the routes controller. This works in the sense that it sorts the list but once I’m inside the computed property I can’t iterate the this.args.vacationsList array (@sort() returns a MutableArray if I’m not mistaken) because it’s always empty.

What am I doing wrong?

2

You’re getting tripped up by promise proxy arrays. This:

let vacations = this.store.findAll('calendar-entry');

makes vacations a promise proxy array. It can be used as a promise, but it can also act kinda like an array that will eventually be filled with the records, once they’re loaded.

I would suggest awaiting the promise so you can get a real array of models instead:

async model() {
  let vacations = await this.store.findAll('calendar-entry');
  return {
    dates: vacations,
    count: 1
  };
}
1 Like
3

Yes! Thank you!

That solved it. This was driving me crazy… :grimacing:

1 Like