Get a model after another model fulfills it's promise

1

I’m building an app which as routes that have a model that is dependent on a model from another route. The app displays a list of vehicles and data regarding alerts for those vehicles. The data comes from an API. The problem is that the list of vehicles is a different API from the alerts for those vehicles. So what I need to do is make the call to the vehicles API and using a vehicle ID from that call get the alert data from a different API.

I’m loading the vehicle list on the application route since it’s used on multiple pages. I then have a route for “alerts”.

Here are my routes. The “vehicle” route is a dashboard that displays data from many APIs.

this.resource('vehicle', {
        path: '/dashboard'
        // path: ':vehicle_vehicleId/dashboard'
    }, function() {
        this.resource('alerts', {
            path: 'notifications'
        }, function() {
            this.resource('alert', {
                path: ':alert_id'
            });
        });
        this.resource('reminders', {
            path: 'reminders'
        }, function() {
            this.route('new');
            this.resource('reminder', {
                path: ':reminder_id'
            });
        });
    });

So to sum it all up here is the workflow.

  • The “alerts” route is loaded.
  • Application route makes call to /vehicles API.
  • Once the /vehicles call finishes. I need to get the vehicleId property and pass that along to the /alerts API.
  • This all needs to be loaded into the Alerts Controller so that the template can display the data.

I hope this all makes sense :slight_smile:

2 
// alerts route

model: function(params) {
    var vehicleId = this.modelFor('application').vehicleId;
    return $.getJSON("/alerts/" + vehicleId);
}

// setupController not needed, default is to pass resolved model to alerts controller