How to handle response (pagination) from Django REST framework in EmberJS?

Question

Ember.js

I ran into a problem, how can I not display additional variables in the template, obtained from the Django REST framework response.
It is not clear how to implement serialization when, in addition to the array, a number of variables come.
The original response was:

{
    "results": [{
        "id": 1,
        "title": "lorem ipsum"
    }, {
        "id": 2,
        "title": "lorem ipsum2"
    }, {
        "id": 3,
        "title": "lorem ipsum3"
    }]
}

In store.js file, code like this:

App.ArticleSerializer = DS.RESTSerializer.extend({
    //override extraction of all array GET responses

    extractArray: function (store, primaryType, payload){
        'use strict';

       payload = { aricles: payload.results };

        return this._super(store, primaryType, payload);
    },
  
    //override extraction of all single item GET responses
    extractSingle: function(store, type, payload, id) {
        'use strict';
        payload = { article: payload };
        return this._super(store, type, payload, id);
    },
    normalize: function(type, hash, prop) {
        'use strict';
        if (!hash.screenshot){
            hash.screenshot = 'img/sample-screenshot.png';
        }
        if (!hash.thumbnail){
            hash.thumbnail = 'img/sample-screenshot.png';
        }

        return this._super(type, hash, prop);
    }
});

The template has the following code:

<table>
        <thead>
        <tr>
            <th>{{_t "Id"}}</th>
            <th>{{_t "Title"}}</th>
        </tr>
        </thead>

        <tbody>
        {{#each article in this}}
            <tr>
                <td>{{aricle.id}}</td>
                <td>{{article.title}}</td>
            </tr>
        {{/each}}
        </tbody>
    </table>

But when pagination was added, additional variables appeared in the response that need to be displayed.
Answer with add. variables count, next, previous:

{
    "count": 100,
    "next": "http://127.0.0.1:8000/console/api/articles?offset=20",
    "previous": "http://127.0.0.1: 8000/console/api/articles",
    "results": [{
        "id": 1,
        "title": "lorem ipsum"
    }, {
        "id": 2,
        "title": "lorem ipsum2"
    }, {
        "id": 3,
        "title": "lorem ipsum3"
    }]
}

Changing the extractArray code does not help, I change it like this:

extractArray: function (store, primaryType, payload){
        'use strict';
    
    
        payload = { articles: payload.results, next:payload.next, previous:  payload.previous, count: payload.count  };	

    
        return this._super(store, primaryType, payload);
    },

These variables are not displayed in the template, I try this:
count: {{count}} , {{next}}, {{previous}}
Article model:

/*global Ember*/
App.Article = DS.Model.extend({
    id: DS.attr('string'),
    title: DS.attr('string')
});

// probably should be mixed-in...
App.Article.reopen({
    attributes: function () {
        'use strict';
        var model = this;
        return Ember.keys(this.get('data')).map(function (key) {
            return Em.Object.create({model: model, key: key, valueBinding: 'model.' + key});
        });
    }.property()
});

That is, I don’t understand how aricles is converted to this, I didn’t find such a conversion in the application code, maybe EmberJs itself somehow converts this data.
What could be wrong?

Answer 1

No need to put extra variables in the response. Metadata must be used . They were created for exactly this purpose.