javascript - Connect Ember 2.3 App to WordPress backend with the version 2 WP REST API using adapters and serializers -

i'm connecting ember 2.3 front-end wordpress admin panel client. i'm using version 2 of wordpress json api.

the api great , i've used before $ajax , xhr requests, never felt great implementation , version 1.

this time, i've set adapter this:

app/adapters/application.js

import ds 'ember-data';  export default ds.jsonapiadapter.extend({   host: 'http://example.com',   namespace: 'wp-json/wp/v2' }); 

jsonapiadaper new default , expects returned data complient jsonapi standard.

, used findall data of pages store.

app/routes/application.js

import ember 'ember';  export default ember.route.extend({    model() {     var pagesdata = this.store.findall('page');     console.log(pagesdata);     return pagesdata;   }  }); 

here's url example. http://mellonwinslowdb.com/wp-json/wp/v2/pages

what returned, doesn't appear compliant jsonapi standard.

error while processing route: work assertion failed: normalizeresponse must return valid json api document: * 1 or more of following keys must present: "data", "errors", "meta".

error: assertion failed: normalizeresponse must return valid json api document: * 1 or more of following keys must present: "data", "errors", "meta".

this leads me check out options serialize data shape. tried few of options don't understand happening , therefor, do.

app/serializers/application.js

import ds 'ember-data';  export default ds.jsonapiserializer.extend({ }); 

this receives errors right off bat, , think - it's not valid jsonapi data... i'll try regular json serializer.

app/serializers/application.js

import ds 'ember-data';  export default ds.jsonserializer.extend({ }); 

i'm unsure why, errors gone , array of pages.

for example, on /about "view" i'll need show content json in store / , don't want send request server, try out peekrecord() ~ returns page data store.

app/routes/about.js

import ember 'ember';  export default ember.route.extend({    model() {     var pagedata = this.store.peekrecord('page', 43);     console.log(pagedata);     return pagedata;   }  }); 

in template, try , show of data i'll expect: app/templates/about.hbs

<h1>about</h1>  {{model.id}} {{model.title}} {{model.content}}  {{outlet}} 

i can id, when further console.log of json, doesn't how expect - , none of content thought there, except id, there...

what adapter / serializer setup can me need , grabbing post , page data? expect combo prevalent.

any direction appreciated. : )

it's late project, in future, there github repo contains example ember adapter, model, serializer, , templates interacting wp rest api here.

adapter:

import ds 'ember-data'; import config 'ember-get-config';  // wp api requires rest adapter. export default ds.restadapter.extend({     host: config.wordpresshost,     // default namespace wp api v2.     namespace: 'wp-json/wp/v2',      handleresponse(status, headers, payload, requestdata) {         // wordpress sends meta data (useful pagination) in requests headers.         // here move `meta` property ember expects.         if (payload) {             const meta = {                 total: headers['x-wp-total'],                 totalpages: headers['x-wp-totalpages']             };             payload.meta = meta;         }         return this._super(status, headers, payload, requestdata);     } }); 

post model: (there term model well)

import ds 'ember-data';  const {model, attr, hasmany} = ds;  export default model.extend({     title: attr('string'),     content: attr('string'),     excerpt: attr('string'),     slug: attr('string'),     date: attr('date'),     featured_media: attr('number'),     format: attr(),     categories: hasmany('category', {async: true}),     tags: hasmany('tag', {async: true}),     acf: attr() }); 

serializer:

import ember 'ember'; import ds 'ember-data';  export default ds.restserializer.extend({     isnewserializerapi: true,      // here wrap payload in named object after model type     // because ember expects { post: { datahere } }     normalizesingleresponse(store, primarymodelclass, payload, id, requesttype) {         var payloadtemp = {};         payloadtemp[primarymodelclass.modelname] = [payload];          return this._super(store, primarymodelclass, payloadtemp, id, requesttype);     },      // then, can deal our missing root element when extracting arrays json.     normalizearrayresponse(store, primarymodelclass, payload, id, requesttype) {         const payloadtemp = {};         const rootkey = ember.string.pluralize(primarymodelclass.modelname);          payloadtemp[rootkey] = payload;          return this._super(store, primarymodelclass, payloadtemp, id, requesttype);     },      normalize(modelclass, resourcehash, prop) {         // bored typing `title.rendered`, here move `rendered` part up.         if (resourcehash.content && resourcehash.title.rendered) {             resourcehash.content = resourcehash.content.rendered;             resourcehash.title = resourcehash.title.rendered;         }         if (resourcehash.title && resourcehash.title.rendered) {             resourcehash.title = resourcehash.title.rendered;         }         if (resourcehash.excerpt && resourcehash.excerpt.rendered) {             resourcehash.excerpt = resourcehash.excerpt.rendered;         }         return this._super(modelclass, resourcehash, prop);     } }); 

this has helped me lot, maybe can others too.