Changing the default AJAX requests

Ember Data
1

I am having trouble with a specific case using Ember-Data.

Typically Ember expects a model class, the route, the ajax request, and the returned JSON, to all follow a similar pattern.

The RESTAdapter tries to automatically build a URL to send to the server, which is ok for some situations, but I need full control over some of my request URLs particularly when it comes to appending additional parameters, or matching an API to a route that has a completely different URL structure.

Ember sadly, has no guides for this, though I did find something about the buildURL method

I am not comfortable enough rooting through the source code to find out what happens under the hood though I do not want to break ember just to fix a few use cases.

  • I have set my RESTAdapter’s namespace to “api/rest”
  • The model and resource I want to populate is “view-debtors”
  • The specific service I want to reach is at “debtor/list”
  • I also need to pass extra parameters for pagination “?page_size=10&page_number=1”, for example.

I am completely lost how to do this. I cannot change the API structure… there are too many services depending on them.

2

Have you taken a look at DS.Adapter? You can provide your own adapter at the application and/or the model level which you can use to change how and where data gets loaded from.

2 Likes
3

That’s exactly what I did on the project I’m currently working on. We have to adapt to an existing backend API which doesn’t play well with Ember Data conventions. I ended up creating a custom Adapter (extending from DS.Adapter) & a custom Serializer (extending from DS.JSONSerializer). Creating an adapter was quite straightforward. The serializer took much more effort though. For example, when creating a record our backend simply responds with {success:true}. This means there is no record data returned. In such case DS.JSONSerializer.extractCreateRecord should return null. This is not documented. Had to dig through the code to find this.

1 Like
4

Thanks for the replies! As of now I have used DS.RESTAdapter to change how the adapter is working.

the specific endpoint I am reaching is api/rest/debtor/list

the resource I want to use the model with is at portal/placements/view-debtors

I used ember-data’s default behavior to my advantage in this case:

I created a model called list, changed its specific adapter’s namespace to api/rest/debtor

Now I can just use the route for view-debtors and pass a model hook with this.store.find('list', {page_size=10, page_number=1}

This is not a very elegant solution, because I will need to do this for almost every endpoint an a case-by-case basis. I have been told on Stack Overflow that this method will get even more hariy when I want to start doing POST, PUT, DELETE methods

Is there a better method to use? Are there other ember model libraries that are more adaptable? I am looking for some guidance. Thanks!

5

I am finding that out too, that the serializer is a bit more tricky to work with. I will need to find the best way to normalize and parse my payloads. I also have a distinct hurdle, I am actually learning javascript on the fly parallel to Ember, so it is taking a little longer for everything to sink in. I would be interested to know some your input of the API methods I would need to learn about when it comes to normalization and parsing.

6

I recently wrote a serializer/adapter to work with the Code for America API, at https://github.com/codeforboston/brigade_frontend/blob/master/app/scripts/store-prod.js. Hopefully it helps to see some example code?