# Filtering, Pagination with JSON API

**URL:** <https://discuss.emberjs.com/t/filtering-pagination-with-json-api/9048>\
**Category:** Ember Data\
**Created:** [November 4, 2015, 8:52am UTC](https://discuss.emberjs.com/t/filtering-pagination-with-json-api/9048 "2015-11-04T08:52:07Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![mkconn](https://avatars.discourse-cdn.com/v4/letter/m/a6a055/32.png) [@mkconn](https://discuss.emberjs.com/u/mkconn)\
**Post date:** [November 4, 2015, 8:52am UTC](https://discuss.emberjs.com/t/filtering-pagination-with-json-api/9048/1 "2015-11-04T08:52:07Z")

</div>

I’m wondering - the now recommended way to use ember/ember-data with a backend is with json api… so far, so good… Now that I have switched my backend to respond and receive json api its about time to switch the ember frontend to work with json api and here begins the trouble… I just want to paginate a route, the recommended spec is to have something like : page[number]=1&page[size]=5 … something like that. Now try to set object queryParams - its just not working or do I miss something?

```
//some-route.js 
queryParams: {
    page: {
      number: {
        refreshModel: true
      },
      size: {
        refreshModel: true
      }
    },
    sort: {
      refreshModel: true
    },
    filter: {
      title: {
        refreshModel: true
      }
    }
  },

  //some-controller.js
  queryParams: ['page[number]', 'filter[title]'],
  pageBinding: 'content.page.number',
  totalPagesBinding: 'content.total',
  perPageBinding: 'content.page.size',
  page: {
    number: 1,
    size: 10
  },
  filter: {
    title: null
  }

```

Tried several other ways (just had ‘page’ instead of ‘page[number]’ as queryParams property and so on…) but none was working. So, why should one use JSON API with ember when ember/ember-data is not ready? Again… or do I miss some basic stuff here?

---

<div class="post-metadata">

**Author:** ![nightire](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/nightire/32/14788_2.png) [@nightire](https://discuss.emberjs.com/u/nightire)\
**Post date:** [November 4, 2015, 9:23pm UTC](https://discuss.emberjs.com/t/filtering-pagination-with-json-api/9048/2 "2015-11-04T21:23:58Z")

</div>

Never worked with JSON API yet but interesting in. By saying “none was working”, what is the actual behaviors under your observations?

I’ve looked your examples and wondering whether or not `page` params didn’t react for UI related changes? Have you ever try to set it in `Ember.Object` instead of primitive object, I mean like `page: Ember.Object.create({ number: 1, size: 10 })`?

---

<div class="post-metadata">

**Author:** ![mkconn](https://avatars.discourse-cdn.com/v4/letter/m/a6a055/32.png) [@mkconn](https://discuss.emberjs.com/u/mkconn)\
**Post date:** [November 5, 2015, 12:28pm UTC](https://discuss.emberjs.com/t/filtering-pagination-with-json-api/9048/3 "2015-11-05T12:28:09Z")

</div>

> [@nightire](#):
>
> I’ve looked your examples and wondering whether or not page params didn’t react for UI related changes? Have you ever try to set it in Ember.Object instead of primitive object, I mean like page: Ember.Object.create({ number: 1, size: 10 })?

It does not react though… Tried your suggestion with the Ember object but does not work either.

From here [Ember Query Param API examples · GitHub](https://gist.github.com/machty/8167051) it seems that object query params are just not working 😕 . Still wondering if Ember is really ready to be used with JSON API… I doubt it.

---

<div class="post-metadata">

**Author:** ![nightire](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/nightire/32/14788_2.png) [@nightire](https://discuss.emberjs.com/u/nightire)\
**Post date:** [November 5, 2015, 1:08pm UTC](https://discuss.emberjs.com/t/filtering-pagination-with-json-api/9048/4 "2015-11-05T13:08:22Z")

</div>

Okay…that’s bad.

My quickest thoughts of possible solution is to override the [Route.deserialize hook](https://github.com/emberjs/ember.js/tree/v2.1.0/packages/ember-routing/lib/system/route.js#L1483), so you just define queryParams as usual then transform it to JSON API compatible version to continue the transition. If it’s work as my expectation, then you’ll have different structured queryParams in the model hook than what it is in controller (UI side)

or maybe just leave Routes as normal and make these transformations in the ember-data’s adapter, I guess?

---

<div class="post-metadata">

**Author:** ![mkconn](https://avatars.discourse-cdn.com/v4/letter/m/a6a055/32.png) [@mkconn](https://discuss.emberjs.com/u/mkconn)\
**Post date:** [November 5, 2015, 1:10pm UTC](https://discuss.emberjs.com/t/filtering-pagination-with-json-api/9048/5 "2015-11-05T13:10:42Z")

</div>

Yeh, think I have to do it this way _sigh_ 😉

---

<div class="post-metadata">

**Author:** ![Ross\_Anthony](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/ross_anthony/32/12656_2.png) [@Ross\_Anthony](https://discuss.emberjs.com/u/Ross_Anthony)\
**Post date:** [October 21, 2016, 7:50pm UTC](https://discuss.emberjs.com/t/filtering-pagination-with-json-api/9048/6 "2016-10-21T19:50:12Z")

</div>

Curious to know if object based query params are now supported in the latest version of Ember or if there is planned support in the pipeline. Struggling to find any info about it in the docs. e.g. /listing?filter[categories]=101,102,103&filter[tags]=a-test-tag,another-tag