CODEWITHSUNDEEP
javascriptember.jsember-data
Anthony
Anthony

Reputation: 35928

EmberJS not making a request to get data from rest api

I'm trying to integrate ember into my app. I want to replace a table that shows list of records with ember. I've got a rest api that will return the data for the table. However, the below ember code never makes a request to get the data from the rest api. 

var App = Ember.Application.create({});

App.Router.map(function() {

});

App.Store = DS.Store.extend({
    revision: 11,
    adapter: DS.RESTAdapter.extend({
        url: '/myapp/stuff/list'
    })
});

App.Response = DS.Model.extend({
    author: DS.attr("string"),
    book: DS.attr("string")
});

Below is what I have in my html page:

    <script type="text/x-handlebars">
        <h1>whatever</h1>

        {{#each model}}
        <h1>{{author}}</h1>
        {{/each}}
    </script>

However, on the browser the only thing I see is whatever. I do not see the results from the API nor do I see a request being made to myapp/stuff/list.

My API looks like this:

{
  "meta": {
     "code": 200
   }
   "response": {
      "stuff": [{
         "id": 1,
         "author": "someone",
         "book": "some book"
         },
         {
         "id": 2,
         "author": "some author",
         "book": "anotherbook"
         }
       ]
   }
}

Upvotes: 1

Views: 1809

Answers (1)

Mike Grassotti
Mike Grassotti

Reputation: 19050

OK there are a few things going on here. First is that there is no route definition, that is where you specify how ember should lookup your model data. In this case you can specify an application route with a model hook that calls your api, like:

App.ApplicationRoute = Ember.Route.extend({
  model: function(){
    return App.Response.find();
  }
});

With this in place ember will attempt to call your api. But the request will not be to the url you are expecting: instead it will call /myapp/stuff/list/responses since ember appends the pluralized model name to the adapter's base url.

Finally if your api returns the above json ember will complain that Your server returned a hash with the key response but you have no mapping for it. By convention the API should be returning an array of responses instead of a single response. The following will work:

{
"meta": {
 "code": 200
 },
 "responses": [
   { "id": 1, "author": "someone", "book": "some book "},
   { "id": 2, "author": "some author", "book": "anotherbook" }
 ]
}

I've posted a working example here (using a custom adapter that simulates your api response) http://jsbin.com/ICoYUxU/2/edit?html,js,output

App = Ember.Application.create({});

App.Router.map(function() {});

App.Response = DS.Model.extend({
    author: DS.attr("string"),
    book: DS.attr("string")
});

App.ApplicationRoute = Ember.Route.extend({
  model: function(){
      return App.Response.find();
  }
});

App.Store = DS.Store.extend({
  adapter: 'App.Adapter'
});

var responses = {
  "meta": {
     "code": 200
   },
   "responses": [
     { "id": 1, "author": "someone", "book": "some book "},
     { "id": 2, "author": "some author", "book": "anotherbook" }
   ]
};

App.API = {
  '/myapp/stuff/list/responses': responses
};

App.Adapter = DS.RESTAdapter.extend({
  url: '/myapp/stuff/list',
  ajax: function(url, type, hash) {
    json = App.API[url];
    console.log('App.Adapter.ajax:', url, type, hash, json);
    return new Ember.RSVP.Promise(function(resolve, reject) {
      Ember.run(null, resolve, json);
    });
  }
});

Upvotes: 2

Related Questions