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 ?

I'm kinda new in Ember unfortunately I'm not sure what do you mean by that. — SuperMarco
– SuperMarco, Commented Feb 5, 2014 at 16:37
Well, first of all, you're following a different structure for your app than the current guides use, but you can do that if your app necessitates. What version of ember are you using? Are you planning to use ember data? I was suggesting putting the .property() on the closing brace of the findAll function. — claptimes
– claptimes, Commented Feb 5, 2014 at 16:44
I'm using the v1.3.1 of ember. I already use ember data to store some information on the login. I wanted to display the data directly from the request because there is a lot of information.. I most likely receive an object like that : Object {ok: true, enquiries: Array[3]} enquiries: Array[3] 0: Object 1: Object 2: Object And in every object inside the enquiries there is a lot of information.. If there is an easiest way to do it, I would like to know it, because even after reading the guide, I can't figured it out.. — SuperMarco
– SuperMarco, Commented Feb 5, 2014 at 16:50

Community · Accepted Answer · 2017-05-23 11:53:18Z

4

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;
   }
});

edited May 23, 2017 at 11:53

CommunityBot

11 silver badge

answered Feb 5, 2014 at 17:50

mavilein

11.7k4 gold badges46 silver badges50 bronze badges

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

1 Comment

SuperMarco Over a year ago

Thanks man !! its working ;) Just to inform that I had to keep the object empty called Enquiries because of the reopenClass, and as well to call App.Enquiries.create() instead. Working perfectly !!

Collectives™ on Stack Overflow

Ember displaying data from an ajax call

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related