Setting up Ember-Data DS.RESTadapter with Wordpress and JSON REST API Plugin

Question

I'm just getting started with ember, and working on an ember.js app which loads it's data store from a Wordpress blog, which is running the JSON REST API plugin.

The API has a namespace of 'wp-json.php', and uses these conventions.

Issue I: I'm getting the error Error while loading route once I try to setup the DS.RESTAdapter, and load the model.

Issue II: I'm trying to pass the header "type": "custom_post_type_slug", in order to get the data of a custom post type, and can't get that to work either.

Here is my code:

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

    //Router
    App.Router.map(function () { 

  
  
           this.resource('posts', {path: '/'},  function() {
  
    
                this.resource('post', { path: ':post_id' } );
  
                 });
   
   
  
       }); //End Router




    //Posts Route 
    App.PostsRoute = Ember.Route.extend({

       model: function(){
           return this.store.find('post');
    
    
       },

    
     });




   //Data

   App.Post = DS.Model.extend({
      title         : DS.attr('string'),
  
});




   App.PostAdapter = DS.RESTAdapter.extend({
      host: 'http://example.com',
      namespace: 'wp-json.php'
   });


    DS.RESTAdapter.reopen({
      headers: {
       "type": "custom_post_type_slug"
 
       }
     });

Any pointers would be greatly appreciated!

The full error I'm getting is: [Debug] Transition #1: posts: handling error: TypeError: 'undefined' is not an object (evaluating 'factory.store = this') (ember.prod.js, line 3078) — Nate F.

Nate F. Nate F. · Accepted Answer · 2014-02-12T19:59:56

OK, after much head bashing and reading, I solved these two issues as follows:

ISSUE I:

This issue was related to the format of my JSON being returned. The json was being returned as:

[{"id":963,"title":"Joe Whitney"},{"id":962,"title":"Philip Varone"}]

Instead of being prefixed by "posts" as ember.js expects, like so:

{"posts" : [{"id":963,"title":"Joe Whitney"},{"id":962,"title":"Philip Varone"}]}

Once I modified the plugin to return the JSON in the format ember expected, I resolved this issue.

ISSUE 2: I was improperly trying to pass the query "type": "custom_post_type_slug" via the RESTAdapter headers, instead of via the DS.Store find method. I solved this by following the DS.Store find method guidelines and instead passing the query variables through the model declaration like so:

//Posts Route 
App.PostsRoute = Ember.Route.extend({

   model: function(){
       return this.store.find('post', {'type' : 'custom_post_type_slug'});


   },


 });

Setting up Ember-Data DS.RESTadapter with Wordpress and JSON REST API Plugin

1 Answers