How To Handle Errors With Active Model Adapter

Ember Data
1

Hey!

I tried following this: http://emberjs.com/api/data/classes/DS.Errors.html but for some reason it doesnt work. I have no idea why.

My api is returning this JSON:

{
    "errors": {
        "email": ["The email address is already being used."]
    }
}

and in my template, I have:

{{#each model.errors.messages as |message|}}
  <div class="error">
    {{message}}
  </div>
{{/each}}

and the code I am using to make the request (controller):

export default Ember.Controller.extend({
  actions: {
    updateUser(model) {
      this.set('loading', true);
      model.get('content').save().then(()=> {
        Materialize.toast('Your information has been updated.', 5000);
      }).catch(() => {
        Materialize.toast('There was a problem updating your information.', 5000);
      }).finally(() => {
        this.set('loading', false);
      });
    }
  }
});

But the errors messages arent showing up on the page.

Any ideas whats going on?

Thanks.

P.S. Yes, I double checked. I am using AMA.

2

Bumping this post. Anyone have a solution?

3 
{{#each model.errors.messages as |message|}}
  <div class="error">
    {{message}}
  </div>
{{/each}}

Should be:

{{#each model.errors.email as |message|}}
  <div class="error">
    {{message}}
  </div>
{{/each}}
4

Keying an errors object by type would require that there be an #each block for each parameter, and another #each to get at individual messages:

{{#each model.errors.email as |messages|}}
  {{#each messages as |message|}
    <p>{{message}}</p>
  {{/each}}
{{/each}}
...
{{#each model.errors.firstName as |messages|}}
  {{#each messages as |message|}
    <p>{{message}}</p>
  {{/each}}
{{/each}}
...
{{#each model.errors.lastName as |messages|}}
  {{#each messages as |message|}
    <p>{{message}}</p>
  {{/each}}
{{/each}}

And so on.

The JSON API, fwiw, demands that errors be returned as a single array of objects, each of which contains info about which param it involves:

{
  "errors": [
    {
      "title": "you screwed up the email field",
      "detail": "The email address is already being used.",
      "source": {
        "parameter": "email"
      }
    }
  ]
}

One would presumably iterate over the array something like this:

{{#each model.errors as |error|}}
  <div class="error">
    <h4>{{error.title}}</h4>
    <p>{{error.detail}}</p>
  </div>
{{/each}}

Unfortunately, this format doesn’t lend itself to grouping each type of error in the template, whereas the OP’s format does. For example, displaying all of the “email” errors under the email form input. With JSON API, one would either have to iterate over all errors and only display the ones with source.parameter === “email”, or do some sorting beforehand. Even if one is ok with just displaying all errors at the top of the page, one could still end up with wonky ordering:

firstName email lastName email etc.

Although, in practice, that’s unlikely, as the back end would probably put them in some rational order.

5

@gregarnott Still doenst work

@brian_ally I tried to make the changes but it still doesnt work.

JSON:

{
    "errors": [
        {
            "title": "The email address is already being used.",
            "detail": "The email address is already being used.",
            "source": {
                "parameter": "email"
            }
        }
    ]
}

Handlebars:

{{#each model.errors as |error|}}
  <div class="error">
    <h4>{{error.title}}</h4>
    <p>{{error.detail}}</p>
  </div>
{{/each}}

No errors in the console other than warning/error about the 422.

6

Are you sure it isn’t just errors, rather than model.errors?