Ember displaying data from an ajax call

Question

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 ?

Answer 1

The error message basically says, that Ember expects an array but there is no array. I think this is because you are setting the AJAX response directly as content property of your ArrayProxy. But your response object is no array (your comments indicate this at least).

I would recommend something like the following. Have a look at this question for more details on how to use Ember without Ember Data.

App.Enquiry = Ember.Object.extend({ // rather one Object for each Enquiry

});

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

App.Enquiries.reopenClass({
   findAll: function() {
       var result = [];
       $.ajax({
           url: host + 'mdf/enquiry',
           type: 'GET',
           accepts: 'application/json',
           success: function(data) {
               data.enquiries.forEach(function(enquiry){
                  // we are iterating the enquiries in the response step by step and create corresponding objects
                  var model = App.Enquiry.create(enquiry); 
                  result.addObject(model); //fill your array step by step
               });
               console.log('DEBUG: GET Enquiries OK');
           },
           error: function() {
               console.log('DEBUG: GET Enquiries Failed');
           }
       });
       return result;
   }
});