Can't load external JSON in Ember.js

Question

I'm new to Ember and I'm having a problem loading JSON from a URL. Here's what I have:

var App = Ember.Application.create();

App.ApplicationController = Ember.Controller.extend();
App.ApplicationView = Ember.View.extend({ templateName: 'application' });

App.OrdersListController = Ember.Controller.extend();
App.OrdersListView = Ember.View.extend({ templateName: 'orders' });

App.Order = Ember.Object.extend();
App.Order.reopenClass({
  find: function(){
     //not implemented yet 
  },
  findAll: function(){
      var content = [];
      $.ajax({
      url: 'http://api.domain/orders',
      dataType: 'jsonp',
      success: function(response){
        response.data.forEach(function(order){
          this.content.addObject(App.Order.create(order))
        }, this)
      }
    });
    return this.content;
  }
});

App.Router = Ember.Router.extend({
  enableLogging: true,
   // The initial state for the router, contains every other.
  root: Ember.Route.extend({
    goOrders: Ember.Route.transitionTo('orders'),
    goLocations: Ember.Route.transitionTo('locations'),
    goReports: Ember.Route.transitionTo('reports'),
    goUsers: Ember.Route.transitionTo('users'),
    goHelp: Ember.Route.transitionTo('help'),
    //Authenticated routes
    index: Ember.Route.extend({
        route: '/',
        redirectsTo: 'orders'
      }),
    orders: Ember.Route.extend({
      route:'/orders',
      initialState: 'index',
      //Orders view.
      index: Ember.Route.extend({
        route: '/',
        connectOutlets: function(router) {
          router.get('applicationController').connectOutlet({
            name:'ordersList', 
            context: App.Order.findAll()
          });
        }
      })
    })
  })
});

App.initialize();

And in my template (simplified):

<script type="text/x-handlebars" data-template-name="application">
    {{outlet}}
</script>

<script type="text/x-handlebars" data-template-name="orders">
    {{#each order in controller.content}}
<p>id: {{order.ord_id}}</p>
    {{/each}}
</script>

With this I don't get and error but nothing shows up. If I paste he JSON in the context of the connectOutlet it works though. Is there a problem with my findAll() function?

You want to pass either App.Order.find() or App.store.findAll(App.Order) to the connectOutlets call instead of App.Order.findAll() — zentralmaschine
– zentralmaschine, Commented Nov 14, 2012 at 17:13
When I pass App.store.findAll(App.Order) I get an error: TypeError: 'undefined' is not an object (evaluating 'App.store.findAll') Isn't that for Ember-data? I'm not using it. — jabbermonkey
– jabbermonkey, Commented Nov 14, 2012 at 17:41
If I do this {{#each order in controller}} i get this error: TypeError: 'undefined' is not a function (evaluating 'b.addArrayObserver(this)') — jabbermonkey
– jabbermonkey, Commented Nov 14, 2012 at 17:58
As you are declaring var content, you should not use this.content, but just the content variable. Does it work ? — lcoq
– lcoq, Commented Nov 15, 2012 at 9:02

mavilein · Accepted Answer · 2012-11-15 11:53:41Z

3

I would try this one:

findAll: function(){
      var content = [];
      $.ajax({
      url: 'http://api.domain/orders',
      dataType: 'jsonp',
      success: function(response){
        response.data.forEach(function(order){
          content.addObject(App.Order.create(order))
        }, this)
      }
    });
    return content;
  }

As you see, i just removed the this pointer two times. I think the this pointer in this case points to an the Order class, which does not have a content property. But you want to reference the var you defined. Therefore it should be without this.

Note: I do also have trouble from time to time with the this pointer, when fetching data. But this structure has always worked for me so far. So it should work, but my explanation might not be perfect.

answered Nov 15, 2012 at 11:53

mavilein

11.7k4 gold badges45 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

jabbermonkey Over a year ago

I think that content needs to be a property of Order because before the data is returned the template will use the empty array and then it's populated when the data is fetched. The data is fetched ok. Maybe I'm not binding it correctly with the template?

mavilein Over a year ago

Did you try my approach? I guess not. What you basically say is, that you fetch your orders per JSON and you want to set those orders as content in your oder class. This is just wrong. Try my approach and you will likely be fine. Otherwise post a jsFiddle, so that we can discuss about running code.

jabbermonkey Over a year ago

Yes I tried it and it does not give an error but same result - can't access the data.

jabbermonkey Over a year ago

Not sure what the problem was with my AJAX call but I tried your solution with getJSON and it worked. Thanks for your help.

Collectives™ on Stack Overflow

Can't load external JSON in Ember.js

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related