Greetings All,

“Payload can be defined as the data in a certain format like JSON or XML that can be sent to HTTP server or can also be received from HTTP server”.

Welcome back again! myself Ashutosh and today I am going to touch the most tricky concept in EmberJS i.e. “How to override or customize the payload(data) that will be sent to the back-end server or HTTP server and vice-versa”?

Here come the prerequisites:

Before going further in this article, we should be well aware of the concepts in ember like how to send data to the server in ember and how to hit any particular API in ember, the concept of adapter, model and mapping of the model, communication with HTTP server using store service based on model etc. If you are well aware of above concept that’s awesome. Let’s go further.

To override or customize the payload in our ember based application, EmberJS provide two major concepts:

  1. Normalization: include override payload after receiving response from the server (Part-1)
  2. Serialization: includes override payload before sending to the server(Part-2)

We will discuss the both part in my two separate consecutive blogs. This part is containing the first part which is Normalization. Let’s proceed.

Try to look our favorite section of blog i.e. code section, I’ll give an explanation after code section.

In above code, we have a route file named product.js and from that file, we are fetching the list of products using product model.This will hit the URL http://localhost:4200/products by default and expects data in standard JSON API format which includes some custom key-value pairs in our payload. To read more about standard JSON data format click here.

Let suppose our data which we will send from back-end server to the ember app is not written in a format which follows the JSON API standard data format.

Let try to look the difference.

A. Our back-end server will produce the payload for the list of a product like:

B. But our ember will expect and consume payload in the following format which is basically a standard JSON API format :

Note: If our payload is not in above format then ember in not going to understand and It would not be able to access any property of our products because ember implement the JSON API standard and it assumes to be the data in that format only. After that, it can access the properties of our product. To do the honor we have to normalize our response which nothing but Normalization as we have discussed above.

Let’s do the normalization in our code to make payload in ember required format. Follow the steps:

  1. We have to generate the serializers for our application which gives us the facility for overriding the payload or normalizing the response. If you are using ember-cli that’s will be fine. Hit the following command in your terminal.

  2. Above command generate a new folder in our app folder named as serializers which include a file called product.js. Make sure the file name is same as your model name here both are a product.
  3. The file will look like:
  4. Ember serializer gives us a method called as normalizeResponse() with some predefined arguments list to override the payload that we are getting from the server and return the new payload for ember to access the data properties. Let’s override:

    In above code, the argument name payload contains data that will be received from the back-end and after that, we are taking new variable named as newPayload and normalizing the response according to ember expectation.

That’s it, you have done with first part where we have discussed “how to normalize the response getting from back-end HTTP server”. Soon, I will publish the second and most interesting part of this blog which will be overridden payload before sending it to the server.

Thanking you all,

If you have any issues or doubts, please pull my attention by pushing some keyboard in the comment box and do the same for any kind of feed back.

Until then, Happy Learning………………… 🙂 🙂