Remote paginated API without ember-data

[gnapse]

I have a custom API that allows pagination, but I do not interface with it via ember-data. I call it directly with $.ajax passing the pagination parameters myself, and receiving the model in the json response as it is. The examples available for remote paginated api all assume one is using ember-data. Is there a way around this?

[acorncom]

It looks like overriding https://github.com/mharris717/ember-cli-pagination/blob/master/addon/remote/paged-remote-array.js#L71-L79 using reopenClass would probably do this, but not sure if that's a recommended work around.

I've got the same need for an app on my end, as we're hitting a remote service that has paginated data. I'm needing to use the remote service's JS client to interact with it, so fitting it into Ember Data is doable, but more work than I'd like ;-)

[acorncom]

@gnapse Based on what I'm seeing, it might be simplest to use a custom EmberData model adapter and then override the query method that is called at https://github.com/mharris717/ember-cli-pagination/blob/master/addon/remote/paged-remote-array.js#L76

A sample query adapter setup is visible here: https://github.com/emberjs/data/blob/v2.1.0/packages/ember-data/lib/adapters/rest-adapter.js#L421-L429

[gnapse]

I actually ended up creating a custom PagedRemoteArray class in my project, based off the one in this library, and it interoperates with the rest of the library just fine.

The API I'm using is not compatible with Ember Data, even if I wanted, because it delivers a nested structure, with objects containing other objects, or array fields with objects in it, etc.

[zion]

@gnapse Are you using the ember ajax addon? I have a route that gets data through the ajax service and am having difficulty getting this to work. Any chance you could share your solution?

[gnapse]

@zion you can sub-class this addon's PagedRemoteArray and override either fetchContent or rawFindFromStore (depending on the level of control you need) and put in there your own ajax data loading call and promise. The relevant file and fragment of what I'm talking about is here.

Or you can also shamelessly copy that whole class and modify it to suit your needs. Then in either case you can instantiate the resulting class as the data model in your routes. You pass to it the query params including page, perPage, etc.

[zion]

I'll try it. Do you just put the sub class in the mixin directory?

Simeon

On Mar 7, 2017, 5:19 PM -0600, Ernesto García notifications@github.com, wrote:

@zion (https://github.com/zion) you can sub-class this addon's PagedRemoteArray and override either fetchContent or rawFindFromStore (depending on the level of control you need) and put in there your own ajax data loading call and promise. The relevant file and fragment of what I'm talking about is here (https://github.com/mharris717/ember-cli-pagination/blob/master/addon/remote/paged-remote-array.js#L71-L102).

Or you can also shamelessly copy that whole class and modify it to suit your needs. Then in either case you can instantiate the resulting class as the data model in your routes. You pass to it the query params including page, perPage, etc.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub (https://github.com/mharris717/ember-cli-pagination/issues/139#issuecomment-284892917), or mute the thread (https://github.com/notifications/unsubscribe-auth/ADKBD1dCsZcyVvClQr21TFR72IWT0mNKks5rjeYHgaJpZM4F5JP_).

[gnapse]

It's technically not a mixin, so I don't put it in there. I put it inside app/utils/ just because it does not seem to fit anything else. It's certainly not a component, controller or template. It may be considered a model class, but technically it isn't either. For me it's a utility class.

Then I import it in the routes where I need it, and use it:

import Ember from 'ember';
import PagedRemoteArray from 'my-app/utils/paged-remote-array';

export default Ember.Route.extend({
  model(params) {
    return PagedRemoteArray.create({
      url: `/api/department/${params.department_id}/employees`,
      params, // Or you can filter and pass only the params that make sense.
    });
  },
});

Then in your class you override fetchContent to use that url and params to make the ajax call, instead of querying a ember data store, which is what the regular PagedRemoteArray in this addon does.

Note how you can also use some of the route params to build the URL.

[zion]

Nice! Do you have to do anything special to get the extended class to recognize the store?

Here is my extended utility class, but it throws an error when it tries to run the query on the store.

import Ember from 'ember';
import PagedRemoteArray from 'ember-cli-pagination/remote/paged-remote-array';

export default PagedRemoteArray.extend({
  rawFindFromStore: function(){
    var store = this.get('store');
    var modelName = this.get('modelName');

    var ops = this.get('paramsForBackend');
    var res = store.query(modelName, ops);

    return res;
  }
});

[gnapse]

@zion I thought your intention here was precisely sub-class the paged remote array to make it fetch data from a source other than then ember data store. Otherwise why are you sub-classing it at all? The code you show up there is the same in that method in the original class.

My point above, and the whole point of this issue, is how to be able to use something like this paged remote array, but with a source of data that does not come from ember data store models. I wanted to make the data fetching ajax request myself, because I am using a api that does not conform to ember data, and that I do not control.

Also, no one could give you much help if you post that you're getting an error when trying to run the query store, but you don't post any details about that error. And finally, I would suggest at this point you take this to StackOverflow, because it seems more and more not related to a problem with this addon per-se.

[zion]

Yea, thats fair. :) Should have been more descriptive earlier.

After reading the readme again, I found that I needed to pass in my ajax service to the create method of the PagedRemoteArray class. Now its making the proper request but now I have an ArrayProxy error.

Error while processing route: admin.orders.index Assertion Failed: ArrayProxy expects an Array or Ember.ArrayProxy, but you passed object Error
    at assert (http://localhost:4200/assets/vendor.js:20164:13)
    at Object.assert (http://localhost:4200/assets/vendor.js:31092:34)
    at Class._setupArrangedContent (http://localhost:4200/assets/vendor.js:49490:21)
    at Class._arrangedContentDidChange (http://localhost:4200/assets/vendor.js:49480:12)
    at Object.applyStr (http://localhost:4200/assets/vendor.js:53379:20)
    at Object.sendEvent (http://localhost:4200/assets/vendor.js:31605:23)
    at ObserverSet.flush (http://localhost:4200/assets/vendor.js:34979:25)
    at endPropertyChanges (http://localhost:4200/assets/vendor.js:35517:19)
    at Object.changeProperties (http://localhost:4200/assets/vendor.js:35542:26)
    at Object.setProperties (http://localhost:4200/assets/vendor.js:36608:32)