Data from ember-ajax is not rendered to the template

1

Noob here. I see data in the console, but it’s not rendered in my template.

I’m currently working on a two-step registration system. Where you first sign up using email or facebook, then, complete your profile on the next page.

I’m trying render the information captured from the first step (email) and place it into the input field on the second step.

How i imagine it should work:

  1. Signup with email & password, send data to backend, and trigger authentication.
  2. An auth session cookie is created & stored. This contains user ID & email.
  3. Transition to the next route, the edit profile form.
  4. In the application route, query user data based on user ID. Set the data as model.
  5. Pass the model into the form template, and see the form fields get pre-populated.

But i’m stuck in the last step.

Here’s my code:

// routes/application.js
// get the current logged in user, put the data inside model
// reference: https://github.com/simplabs/ember-simple-auth/blob/master/guides/managing-current-user.md#loading-the-current-user

model() {
  return RSVP.hash({
    // problem: this returns empty
    currentUser: this._getCurrentUser()
  });
},

sessionAuthenticated() {
  this._super(...arguments);
  this._getCurrentUser();
},

_getCurrentUser() {
  let authenticated = this.get('session.isAuthenticated');

  if (authenticated) {
    // session does exists and this section does get executed
    let id = this.get('session.data.authenticated.id');
    let access_token = this.get('session.data.authenticated.access_token');

    // fetch user data via AJAX
    return this.get('user').getUser(id, access_token).then((response) => {
      return response;
    }, (response) => {
      throw response;
    });
  } else {
    return {};
  }
}

The ajax service itself:

// services/user.js

getUser(id, access_token) {
  console.log('>> services.auth.getUser');

  return this.get('ajax').request('/members', {
    data: { id, access_token }
  });
},

And in the profile form page:

// templates/register-profile.hbs
// problem: the model.currentUser returns empty

{{log ">> currentUser" model.currentUser}}

<div class="row">
  <div class="columns small-12 medium-8">
    ...

    {{form-profile currentUser=model.currentUser}}
  </div>
</div>

Although if i refresh the page, the email field inside {{form-profile}} gets populated correctly with the email address.

Any feedback would be really appreciated. Thx a lot!

2

It looks like you’re only getting the user once in the Application route (via model()). The model hook is only run on entering a route. The Application route is only entered once on application start

Without seeing more of your code, I think you need to get the current user in the register-profile route’s model(). Each route usually has it’s own model

3

Ah yes. I see that the model gets overwritten by the route’s model. I did notice that. But when i first posted this, there were no model yet in the register-profile route.

I’ve tried using modelFor('application') to call the application model from that route. But that didn’t work. So, i followed your suggestion and called the API again in that page. It works now. Thx.

But there’s another problem now. The data is out of sync. There’s a greeting copy in the home page and the header that contains the user’s name. But every time i update the profile, it’s not getting updated.

I guess maybe it’s time to look into Ember Data.

4

I’m glad it’s at least partly working :slight_smile:

Ember Data can definitely help with keeping data in sync between pages. Another approach is to keep state in services. You can store a fetched user on the service, then in controllers or components access that user without having to call a function, e.g.

// services/current-user.js
export default Ember.Service.extend({
  load() {
    return this.getUser().then(user => {
      this.set('user', user);
    });
  },

  onLogout() {
    this.set('user', null);
  }
});

// component/global-header.js
export default Ember.Component.extend({
  currentUser: Ember.inject('current-user'),

  greeting: Ember.computed('currentUser.user.firstName', function() {
    let name =  this.get('currentUser.user.firstName');
    if(!name) {
      return '';
    }
    return 'Hello, ' + name;
  }
});

Because the service manages the current user, greeting will update automatically when user changes on the currentUser service

5

Thanks for responses. i had same trouble. I fixed.