Creating an Ember Data Adapter for Output from the Flickr API
I'm working on building an Ember App that needs to put information about a photo using the Flickr API. I would like some advice on writing an adapter to pull this information into my Ember app. My Flickr API call returns JSON of the form:
{
"photos": {
"page": 1,
"pages": 2,
"perpage": 100,
"total": "123",
"photo": [
{
"id": "1234567890",
"owner": "1234567@123",
"secret": "1234567890",
"server": "1111",
"farm": 1,
"title": "Some Title",
"ispublic": 1,
"isfriend": 0,
"isfamily": 0
},...
]
},
"stat": "ok"
}
Depending on the format of this answer, I decided that I could not use JSONAPIAdapter and must use RESTAdapter. The only part of the answer that really interests me is the array of photos. This part of the answer also seems to be properly formatted to fit the Ember Data model, as it provides the primary key ID. I've spent quite some time searching the docs to find a solution to this problem, but I'm still very confused as to how these adapters and serializers work. What steps should I take to set up my adapter so that this data is correctly placed on the model? Thank you in advance.
source to share
Here's a great book on the topic: Ember Data in the Wild: Getting Ember Data to Work with Your API by David Tang - and there is also this great blog post: Connect any backend to Ember with custom adapters and serializers from Ember Igniter.
https://api.flickr.com/services/rest/?method=flickr.photos.search&api_key={api-key}&tags=flower&per_page=3&format=json
:
{
photos: {
page: 1,
pages: 71281,
perpage: 3,
total: "213841",
photo: [
{
id: "35314184896",
owner: "33472394@N00",
secret: "e02e15d7c3",
server: "4198",
farm: 5,
title: "Bird's-foot Trefoil",
ispublic: 1,
isfriend: 0,
isfamily: 0
},
]
},
stat: "ok"
}
So, you need to create a model for the "photo" + adapter for capturing the data, and then in the munge / serializer reformat the data how the ember data wants it with normalizeResponse()
or some combination of methods to get it into an array. Where is the url for the photo anyway?
See also this article from David: Ember Data and User APIs - 5 Common Serializer Settings
It's rough. I just tried to pivot, but no adapters. Good luck!
source to share
Solved:
The data is serialized into a photo model using normalizeResponse (). The photo model reflects the photo field in the JSON sample posted above.
import DS from 'ember-data';
// app/serializers/photo.js
export default DS.RESTSerializer.extend({
normalizeResponse(store, primaryModelClass, payload, id, requestType) {
payload = {
photo: payload.photos.photo
};
return this._super(store, primaryModelClass, payload, id, requestType);
}
});
My adapter is defined like this:
import DS from 'ember-data';
// app/adapters/photo.js
export default DS.RESTAdapter.extend({
host: 'https://api.flickr.com/services/rest/?method=flickr.people.getPublicPhotos&api_key=<YOUR_KEY_HERE>&user_id=<YOUR_USER_ID_HERE>&format=json&nojsoncallback=?',
namespace: 'api'
});
Thanks to sheriffderek for sharing great resources above.
source to share