Object as Query Param to Refresh Model


I followed the Query Params guide (http://guides.emberjs.com/v1.11.0/routing/query-params/) and it worked great. Specifically, refreshing the model did exactly what I wanted.

I’m moving the filter to the json-api spec and filtering takes place in a filter object. So rather than:


The server responds to:


I tried to get the query params to work refreshing the model based on an object, but it doesn’t seem to update.

// app/controllers/accounts/index.js

import Ember from 'ember';

export default Ember.Controller.extend({
  queryParams: ['filter', 'sort'],

  filter: {},
  sort: '-id'

// app/routes/accounts/index.js
import Ember from 'ember';

export default Ember.Route.extend({
  queryParams: {
    filter: { refreshModel: true },
    sort: { refreshModel: true }
  model: function(params) {
    return this.store.find('account', params);

// template
<th>{{input type="text" placeholder="ID" value=filter.id}}</th>

Is it possible to have query params work with an object? And if not, is there a better way to go about supporting this without enumerating each value and then manually creating a filter param?


Hey-- have you found a solution to this? I’m trying to implement pagination using the json::api spec that follows the same syntax:


JSON API Pagination


Never found an answer. Ended up bailing on JSON API at the time, b/c it wasn’t baked in to Ember enough. Not sure if it’s any better now. I ended up using the RESTSerializer instead.


Hi all! Hope you don’t mind me reviving such an old thread, but I’ve been working on the same issue myself, and I was able to get it working, so thought I’d share:

All you have to do is use square brackets when you define your filter:

filter: [],

If you then set the value of filter as an object, for instance:

test: {id: 1234, values:['foo', 'bar']},
actions: {
    this.set('filter', this.get('test'));

It will serialise it in the URL by literally url encoding the object:


But fortunately, when you make an API call, Ember Data does the rest of the work for you, and using:

  return this.get('store').query('account', params);

Will send an http request formatted like:


Which decodes into:


I hope this helps with future projects!