EmberJS not making a request to get data from rest api

Asked By: Anonymous

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"
         }
       ]
   }
}

Solution

Answered By: Anonymous

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

Windows 10 Kaufen Windows 10 Pro Office 2019 Kaufen Office 365 Lizenz Windows 10 Home Lizenz Office 2019 Home Business Kaufen Windows 10 Lisans Office 2019 Mac Satın Al follower kaufen instagram follower kaufen porno