# Displaying data from an ajax call

**URL:** <https://discuss.emberjs.com/t/displaying-data-from-an-ajax-call/4072>\
**Category:** Uncategorized\
**Created:** [February 5, 2014, 4:11pm UTC](https://discuss.emberjs.com/t/displaying-data-from-an-ajax-call/4072 "2014-02-05T16:11:53Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![SuperMarco](https://avatars.discourse-cdn.com/v4/letter/s/919ad9/32.png) [@SuperMarco](https://discuss.emberjs.com/u/SuperMarco)\
**Post date:** [February 5, 2014, 4:11pm UTC](https://discuss.emberjs.com/t/displaying-data-from-an-ajax-call/4072/1 "2014-02-05T16:11:53Z")

</div>

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 😄

Thanks for your help !

---

<div class="post-metadata">

**Author:** ![knownasilya](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/knownasilya/32/12912_2.png) [@knownasilya](https://discuss.emberjs.com/u/knownasilya)\
**Post date:** [February 5, 2014, 5:09pm UTC](https://discuss.emberjs.com/t/displaying-data-from-an-ajax-call/4072/2 "2014-02-05T17:09:10Z")

</div>

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…

```nohighlight
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…

```nohighlight
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.

---

<div class="post-metadata">

**Author:** ![SuperMarco](https://avatars.discourse-cdn.com/v4/letter/s/919ad9/32.png) [@SuperMarco](https://discuss.emberjs.com/u/SuperMarco)\
**Post date:** [February 5, 2014, 5:16pm UTC](https://discuss.emberjs.com/t/displaying-data-from-an-ajax-call/4072/3 "2014-02-05T17:16:15Z")

</div>

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' 

```

---

<div class="post-metadata">

**Author:** ![midd](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/midd/32/196_2.png) [@midd](https://discuss.emberjs.com/u/midd)\
**Post date:** [February 5, 2014, 7:03pm UTC](https://discuss.emberjs.com/t/displaying-data-from-an-ajax-call/4072/4 "2014-02-05T19:03:55Z")

</div>

> [@SuperMarco](#):
>
> Object {ok: true, enquiries: Array[3]}

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

```

---

<div class="post-metadata">

**Author:** ![knownasilya](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/knownasilya/32/12912_2.png) [@knownasilya](https://discuss.emberjs.com/u/knownasilya)\
**Post date:** [February 5, 2014, 8:24pm UTC](https://discuss.emberjs.com/t/displaying-data-from-an-ajax-call/4072/5 "2014-02-05T20:24:37Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![SuperMarco](https://avatars.discourse-cdn.com/v4/letter/s/919ad9/32.png) [@SuperMarco](https://discuss.emberjs.com/u/SuperMarco)\
**Post date:** [February 6, 2014, 10:30am UTC](https://discuss.emberjs.com/t/displaying-data-from-an-ajax-call/4072/6 "2014-02-06T10:30:27Z")

</div>

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](http://jsbin.com/qahu/11/edit)

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