Ember serializer customization for alternate url
<p>I am a newbie to ember. So here is what i faced. I got backend RESTAPI written in python/Django. It provides following json response on <code>/api/works/</code></p>

<pre><code>[
{
    "id": 17,
    "title": "about us",
    "description": "some project",
    "owner": "admin"
},
{
    "id": 19,
    "title": "test1 profit project",
    "description": "dev null",
    "owner": "test1"
}
]
</code></pre>

<p>also on detail view E.g:<code>/api/works/17/</code>:</p>

<pre><code>{
"id": 17,
"title": "about us",
"description": "some project",
"owner": "admin"
}
</code></pre>

<p>there is also <code>/api/works/17/tasks/</code> for listing work tasks</p>

<pre><code>[
{
    "id": 2,
    "title": "secondWorkTask",
    "description": "task2 description",
    "due_date": "2016-09-26",
    "assign": 1,
    "project": "about us"
},
{
    "id": 3,
    "title": "some task name",
    "description": "some task description",
    "due_date": "2016-08-27",
    "assign": 2,
    "project": "about us"
}
]
</code></pre>

<p>on the front-end side i am using ember-cli version2.7.0 + <a href="https://github.com/dustinfarris/ember-django-adapter" rel="nofollow">ember-django-adapter</a>. I can get /api/works without problem. </p>

<p><em>serializer on ember</em> to get project:</p>

<pre><code>export default DRFSerializer.extend({
  normalizeFindAllResponse(store, primaryModelClass, payload, id, requestType) {
   payload.data = payload;
   return this._super(...arguments);
 }
});
</code></pre>

<p>What i want to achieve is on the <strong>ember side</strong> when work detail url on the ember side(<code>emberexample-app.com/app/17/</code>) load, it must show all tasks. Currently i can get work detail by this url <code>/api/works/17/</code> with above serializer. But how can i get tasks? Please help me to find a way to solve this.</p>

<p>The serializer are used to customize the loading and saving (or serialization and deserialization) of data.</p>

<p>To customize the URLs you must use an Adapter,(e.g. <a href="http://emberjs.com/api/data/classes/DS.RESTAdapter.html" rel="nofollow" title="Adapter">RESTAdapter</a> is my most used adapter).</p>

<p>That will work in the case you want to create (<code>urlForCreateRecord</code>) or update (<code>urlForUpdateRecord</code>) tasks but it may not directly work if you just want to convert a <code>work.get('tasks')</code> following a <code>belongsTo</code> relationship to a <code>GET http://endpoint/work/&lt;work_id&gt;/tasks</code>, at least in my case it didn't "just work"ed.</p>

<p>A solution I found that works very well is adding a property <code>links</code> as a plain object to the parent objects that contains links to the different child models you want to retrieve as properties.</p>

<p>Something like this:
</p>

<pre><code>/* app/adapters/work.js */
import DS from 'ember';

export default DS.RESTSerializer({
    normalize (model, hash, prop) {
        hash.links = hash.links || {};
        hash.links.tasks = this.buildURL(model, hash.id) + '/tasks';
        return this._super(model, hash, prop);
    }
});
</code></pre>

<p>In this example, when Ember try to get a tasks property from a work model, it will make a GET to the URL that <code>work.links.tasks</code> contains.</p>

python json django rest ember.js