Ember data handle errors

app/adapters/application.js

@@ -1,8 +1,26 @@
 import DS from 'ember-data';
+import Ember from 'ember';
 import config from '../config/environment';
 
 export default DS.RESTAdapter.extend({
   namespace: 'api/' + config.genus,
   host: config.apiURL,
   coalesceFindRequests: true,
+  ajaxError: function(jqXHR) {
+    // http://stackoverflow.com/a/24027443
+    var error = this._super(jqXHR);
+    if (jqXHR && jqXHR.status === 422) {
+      var response = Ember.$.parseJSON(jqXHR.responseText),
+        errors = {};
+      if (response.errors !== undefined) {
+        var jsonErrors = response.errors;
+        Ember.EnumerableUtils.forEach(Ember.keys(jsonErrors), function(key) {
+          errors[Ember.String.camelize(key)] = jsonErrors[key];
+        });
+      }
+      return new DS.InvalidError(errors);
+    } else {
+      return error;
+    }
+  }
 });

app/components/display-errors.js

@@ -0,0 +1,4 @@
+import Ember from 'ember';
+
+export default Ember.Component.extend({
+});

app/templates/components/display-errors.hbs

@@ -0,0 +1,3 @@
+{{#each error in a}}
+  <div class="flakes-message error">{{error.message}}</div>
+{{/each}}

tests/unit/components/display-error-test.js

@@ -0,0 +1,21 @@
+import {
+  moduleForComponent,
+  test
+} from 'ember-qunit';
+
+moduleForComponent('display-error', {
+  // Specify the other units that are required for this test
+  // needs: ['component:foo', 'helper:bar']
+});
+
+test('it renders', function(assert) {
+  assert.expect(2);
+
+  // Creates the component instance
+  var component = this.subject();
+  assert.equal(component._state, 'preRender');
+
+  // Renders the component to the page
+  this.render();
+  assert.equal(component._state, 'inDOM');
+});