Displaying data from an ajax call

1

Hi guys,

I’m pretty new with Ember and I’ve got his error since I tried to display some data from an ajax call :

Uncaught TypeError: Object #<Object> has no method 'addArrayObserver'

The app is very simple, but I wanted to send an ajax request to my server when I was going on a specific page. So I could load the data directly from the server…

Here is my code :

    App.Enquiries = Ember.Object.extend({

});

App.EnquiriesRoute = Ember.Route.extend({
    model: function() {
        return App.Enquiries.findAll();
    }
});

App.Enquiries.reopenClass({
   findAll: function() {
       var result = Ember.ArrayProxy.create({content: []});
       $.ajax({
           url: host + 'mdf/enquiry',
           type: 'GET',
           accepts: 'application/json',
           success: function(data) {
               result.set('content', data);
               console.log('DEBUG: GET Enquiries OK');
           },
           error: function() {
               console.log('DEBUG: GET Enquiries Failed');
           }
       });
       return result;
   }
});

And for the template :

    <ul>
    {{#each item in content}}
    <li>{{item.id}}</li>
    {{/each}}
</ul>

So far I wasn’t sure if using Ember.ArrayProxy was a good idea, but after reading the doc I thought that could work, but no…

I try to look on the web, but it seems that I might be the only one to have this problem ? Otherwise I’m open minded about an easiest way to do it :smile:

Thanks for your help !

1 Like
2

The issue is that you are never returning any content, since you return the proxy and not a promise.

Try using this wrapper, mainly because jQuery has a poor implementation of promises…

function ajax (url, options) {
  return new Ember.RSVP.Promise(function (resolve, reject) {
    options = options || {};
    options.url = url;

    options.success = function (data) {
      Ember.run(null, resolve, data);
    };

    options.error = function (jqxhr, status, something) {
      Ember.run(null, reject, arguments);
    };

    Ember.$.ajax(options);
  });
}

Then in your model…

model: function () {
  return ajax('url', options);
}

The result of ajax is a promise that gets resolved by the route. I recommend that you use Ember Data, because it’s a big pain trying to create your own ORM, and basically you’re just trying to create ED anyways.

3

Thank you, but I tried to figured it out to do it with ember data but since I have a lot of data coming back from my server I thought that could be easier to do it directly from the request…

Most likely I receive this :

Object {ok: true, enquiries: Array[3]}

enquiries: Array[3]

0: Object 1: Object 2: Object

And in every Object I’ve got around 30 to 40 fields…

I’m gonna try your fix !

[Edit] :

I still got the same error as I had before plus an other one…

Assertion failed: The value that #each loops over must be an Array. You passed [object Object] (wrapped in (generated enquiries controller)) 

Uncaught TypeError: Object [object Object] has no method 'addArrayObserver'
4

If it is your server response, you should pass an array itself

success: function(data) {
               result.set('content', data.enquiries);
               console.log('DEBUG: GET Enquiries OK');
           },
5

Would be fabulous if you could create a jsbin, with your code so we can look at it, or even a gist…

6

I didn’t make a jsbin because my app need to connect a node server on my local device…

Here you go, the entire app, so you can see how it looks like :
http://jsbin.com/qahu/11/edit

Its not the prettiest code you ever seen, you have to forgive me ^^.