Search code examples
djangoember.jsember-datadjango-rest-frameworkjson-api

Display JSON Api conform errors

I receive JSON Api conform errors from the backend:

{
  "errors": [
    {
      "status": "400",
      "source": {
        "pointer": "/data/attributes/description"
      },
      "detail": "This field may not be null."
    },
    {
      "status": "400",
      "source": {
        "pointer": "/data/attributes/due-date"
      },
      "detail": "This field may not be null."
    },
    {
      "status": "400",
      "source": {
        "pointer": "/data/attributes/extra-comments"
      },
      "detail": "This field may not be null."
    },
    {
      "status": "400",
      "source": {
        "pointer": "/data/attributes/name"
      },
      "detail": "This field may not be null."
    },
    {
      "status": "400",
      "source": {
        "pointer": "/data/attributes/payment-type"
      },
      "detail": "This field may not be null."
    },
    {
      "status": "400",
      "source": {
        "pointer": "/data/attributes/price"
      },
      "detail": "This field may not be null."
    }
  ]
}

I try to show them in my template, as described in the EmberData documentation:

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

Nothing is shown. I would say the .errors in the model are not populated, but I am not sure how to check this. How can I:

  • display the received ajax reply?
  • make sure that EmberData is processing the reply and populating model.errors?
  • Show the processed model.errors in the console?
  • Show the model and all properties?

In general, I am experiencing that new versions of Ember are very hard to debug. Whenever I show any Ember object in the console, I just see some Computed properties which are not expanded whenever I try to peek into them.

My backend is:

EDIT

This is the data that I am POSTing to the backend (JSONAPi conform):

{
  "data": {
    "attributes": {
      "name": null,
      "description": null,
      "extra-comments": null,
      "min-price": 30,
      "max-price": 3000,
      "price-step": 10,
      "price": null,
      "payment-type": null,
      "due-date": null
    },
    "relationships": {
      "seller": {
        "data": null
      },
      "artist": {
        "data": null
      },
      "subcategory": {
        "data": null
      }
    },
    "type": "projects"
  }
}

The backend is ok with this, detects the errors, and provides a JSON APi conform errors reply, as specified above.

Solution

  • I think I know what's happening (as it happened to me as well).

    Change the HTTP error code from 400 to 422 (Unprocessable Entity) and check if it fixes the problem.

    Also, looking at the source code for the JSONAPIAdapter (which extends from the RestAdapter) I think I'm right.

    isInvalid: function(status, headers, payload) {
   return status === 422;
},

    This can be changed to (adapters/application.js):

    import DS from 'ember-data';

import config from '../config/environment';

export default DS.JSONAPIAdapter.extend(DataAdapterMixin, {
    host: config.API_HOST,
    namespace: config.API_NAMESPACE,
    isInvalid: function(status, headers, payload) {
        return status === 400 || status === 422;
    },
});