CODEWITHSUNDEEP
javascriptember.jsember-data
Mdd
Mdd

Reputation: 4430

Ember Data ajax call

I've recently started learning Ember, and am now trying to understand how to use Ember Data to make an ajax call for data. I would like to get data and log the response to the console when I navigate to the pages'route.

Here is the code I have but cannot get it to log the data:

Handlebars and JS:

<script type="text/x-handlebars">
  <nav>
    {{#link-to 'home'}}Home{{/link-to}}
    {{#link-to 'pages'}}Pages{{/link-to}}
  </nav>
  <div class="container">
    {{outlet}}
  </div>
</script>

<script type="text/x-handlebars" id="pages">
  Info here
  {{log}}
</script>

App = Ember.Application.create();

App.Router.map(function() {
  this.route('home', {path: '/'});
  this.route('home', {path: 'home'});
  this.route('pages', {path: 'pages'});
});

App.Pages = DS.Model.extend({
  status: DS.attr('string'),
  startDate: DS.attr('string'),
  lastModifiedDate: DS.attr('string'),
  author: DS.attr('string'),
  lastModifiedBy: DS.attr('string'),
  title: DS.attr('string'),
  items: {}
});

App.PagesAdapter = App.ApplicationAdapter = DS.RESTAdapter.extend({
  host: 'https://api.mongolab.com/api/1/databases/emberdatatest/collections/itemdata?apiKey=somekey'
});

App.PagesRoute = Ember.Route.extend({
  model: function() {
    this.store.find('pages');   
  }
});

Here is the data I cam getting back as a response:

{
  "_id": {
    "$oid": "5460cc6be4b0933065794003"
  },
  "start": 0,
  "count": 5,
  "total": 1549,
  "pages": [
    {
        "status": "published",
        "startDate": "2014-09-24 12:56",
        "lastModifiedDate": "2014-10-02 12:01",
        "author": "Luke Skywalker",
        "lastModifiedBy": "Darth Vader",
        "title": "home page",
        "items": {}
    },
    {
        "status": "published",
        "startDate": "2014-10-13 08:03",
        "lastModifiedDate": "2014-10-02 12:01",
        "author": "Sauran",
        "lastModifiedBy": "Gandolf",
        "title": "Blog page",
        "items": {}
    },
    {
        "status": "review",
        "startDate": "2014-11-22 13:03",
        "lastModifiedDate": "2014-11-14 14:01",
        "author": "Jean-Luc Piccard",
        "lastModifiedBy": "Worf",
        "title": "Vacuum Cleaners page",
        "items": {}
    }
  ]
}

Upvotes: 0

Views: 757

Answers (1)

Mateusz Nowak
Mateusz Nowak

Reputation: 4121

Instead of 

this.store.find('pages');

you should call

this.store.find('page');

it's going to make request to

https://api.mongolab.com/api/1/databases/emberdatatest/collections/itemdata?apiKey=somekey/pages

Then the api should give you back response in following format (in case of using Rest adapter)

"posts": [{

    "id": 1,
    "status": "foo",
    "startDate": "foo",
    "lastModifiedDate": "foo",
    "author": "foo",
    "lastModifiedBy": "foo",
    "title": "foo"

}]

Inside your router model method you should return the results from anonymous function

App.PagesRoute = Ember.Route.extend({
  model: function() {
    return this.store.find('pages');   
  }
});

Then you can check in ember inspector whether everything was all right.

If you can't force your api to return expected format you can do it without ember data

App.PagesRoute = Ember.Route.extend({
  model: function() {
    return jQuery.getJSON('https://api.mongolab.com/api/1/databases/emberdatatest/collections/itemdata?apiKey=somekey/', function(json) { 
        return json
    });
  }
});

If you want to use ember data I advise you to look here:

http://emberjs.com/guides/models/finding-records/

http://emberjs.com/guides/models/connecting-to-an-http-server/

http://andycrum.github.io/ember-data-model-maker/

Upvotes: 1

Related Questions