How to use dot characters in Ember query params

Question

I have an Ember v2.14 app in which I'm trying to query an external API. The API takes query params that have dots (".") in the keys, like this:

http://example.com/records?query.code=abc123&code.system=whatevs

I've tried setting up the queryParams in my controller like this:

// app/controllers/records.js

import Ember from 'ember';

export default Ember.Controller.extend({
  queryParams: ['query.code', 'code.system'],
  query.code: null,
  code.system: null
})

The Ember build fails with "Unexpected token" at the first dot character in the line after my queryParams declaration.

I've tried using percent-encoding to replace the dots, and this works fine if I enter this in the browser:

http://example.com/records?query%2Ecode=abc123&code%2Esystem=whatevs

But the Ember build again fails if I attempt the same percent-encoding of my query params in the controller.

// app/controllers/records.js

import Ember from 'ember';

export default Ember.Controller.extend({
  queryParams: ['query%2Ecode', 'code%2Esystem'],
  query%2Ecode: null,
  code%2Esystem: null
})

Is anyone aware of something I should be doing differently?

score 0 · Answer 1 · answered Aug 27 '17 at 16:21

um, you mix something up here! queryParams are about query params for your ember application. If you want to call an external API just use $.ajax, ember-data, ember-ajax or ember-fetch, depending on your exact use case.

The query params are for your route. So you can have urls like http://my-ember-app.example.com/foo?bar=baz, and baz is for example a filter value that you use in your controller.

However the real question is how to produce a simple JavaScript object with a key that has a dot.

The answer is simple:

var x = {};
x['foo.bar'] = 'bar';

So you could do something like this:

const params = {};
params.queryParams = ['query.code', 'code.system'];
params['query.code'] = null;
params['query.system'] = null;
export default Ember.Controller.extend(params)

However in newer versions of javascript we have a shortcut:

var x = {
  ['foo.bar']: 'baz'
}

this means you can do this:

const params = {};
params.queryParams = ['query.code', 'code.system'];
params['query.code'] = null;
params['query.system'] = null;
export default Ember.Controller.extend({
  queryParams: ['query.code', 'code.system'],
  ['query.code']: null,
  ['code.system']: null
})

however this is for ember query params, not for calling an external API!

How to use dot characters in Ember query params

1 Answers1