Can't get JSON requests working in Ember.js

Question

So there are a number of examples of Ember.js online but looking at this one for instance:

http://matthewlehner.net/get-started-with-ember-js-in-5-minutes/

It ends up with the following route object:

Test1.ApplicationRoute = Ember.Route.extend({
// admittedly, this should be in IndexRoute and not in the
// top level ApplicationRoute; we're in transition... :-)
model: function () {
    return ['red', 'yellow', 'blue'];
}
});

As a first step I would like to replace that model with a JSON request, so seeing some examples online I tried this:

return $.getJSON('/colors.json');

where colors.json is a file:

 ['red', 'yellow', 'blue']

I have tried some variations on this but it always gives me this error in my browser: "Error while loading route: undefined"

Can someone give me an idea of how to get this working?

See http://jsbin.com/lususavo/4/ for an example of the "before" state. How do I get that to work with getJSON?

You aren't showing us any code that would cause that kind of error. Can you post the rest of your code? Or, preferably, create a JSBin to reproduce the results? — GJK
Take jsbin.com/lususavo/4/edit for example and try to modify it so that it loads a JSON file and displays it instead of the array. — reveazure

Kingpin2k Kingpin2k · Accepted Answer · 2014-06-09T19:07:00

I'm not sure why you're wrapping everything in functions, Ember won't start until the page is ready. (I probably just don't understand it to be honest).

Either way here's an example with getJSON

App.IndexRoute = Ember.Route.extend({
  model: function() {
    return $.getJSON('/colors.json');
  }
});

http://emberjs.jsbin.com/OxIDiVU/627/edit

Can't get JSON requests working in Ember.js

1 Answers