Start a new topic
Answered

Examples of how to use Observables in Ionic/Angular V1?

I'm not familiar with Observables.  It appears that you have to wait for the "complete()" call and then make a callback to continue execution.  (i.e. we do not 'wait' on them as with promises.)  Does anyone have any examples? The angular and ionic Kinvey sample apps show observables with no actual return, they just update the view by changing data. i.e. no logic flow.


The Kinvey doc's also show how to turn an observable into a Promise, but the doc is not very clear and makes references that don't seem to match the observables documentation for 'Fetch" in the User Guide.


Does anyone have any examples in an Angular or Ionic app where observables are used and there is a continuation of the logic (as with a chain of promises)?

(Or a clear explanation of how to use them in place of promises?  All I've found is for Angular 2.x and we cannot convert our app there yet.)


thx


Best Answer
Joel,

Unfortunately, This is the only documentation available about converting observables into promises.

I have some suggestions and sample code directly from Engineering to turn an observable into a promise. Please note that we allow you to use any Promise library that adheres to the Promise/A+ specification. A good choice would be Bluebird found at the following URL.

 

http://bluebirdjs.com/docs/getting-started.html

https://github.com/tildeio/rsvp.js/.


The following code snippet assumes bluebirdjs as been correctly loaded.


 

var countPromise = Kinvey.CustomEndpoint.execute('getCountForCollection', { query: query.toQueryString().query, collectionName: collectionName });
var datastore = Kinvey.DataStore.collection(collectionName);
var promise = datastore.find(query).toPromise();
var promiseArray = [countPromise, promise];

if (gridOptions.data.skip === 0) {
  var newPromise = Kinvey.CustomEndpoint.execute('getTotalsForCollection', { query: query.toQueryString().query, collectionName: collectionName });
  promiseArray.push(newPromise);
}

Promise.all(promiseArray)
  .then(function(e) {
    // Some code that runs after the successful requests
  });



Note that this is sample code and may need a little rework in your environment to get it functioning correctly so please keep that in mind. We'll be happy to help you through any problems that you may encounter.

Thanks,
Pranav

 


Hello Joel,


Our logs show that your app is using the Kinvey Angular SDK v3.5.0 yet you're asking about Angular V1. Which version of the Angular SDK are you using?


Observables were introduced with the 3.x version of our SDKs and did not exist in prior releases.


Also, our Angular/JS SDK v1.x apps have reached end-of-life and are no longer supported.


As soon as we are clear on your app's SDK version, we'll see what we can find regarding observables to share with you.


Regards,


Billy Gee

I'm on Ionic 1.x which is on top of Angular 1.x.


I saw the note on the user guide about "version 3", but I presume it meant version 3 of Kinvey.  

This explains part of the problem.  Observables are part of Angular 2, not 1.x


The content in this guide refers to the newly released version 3 of the library. You can still access the version 1.x guides here.

Version 1.x is now deprecated. We will continue to support 1.x through March 31, 2017 (End of Support - EOS). If you are currently using 1.x in your apps, you will need to upgrade your apps to 3.x before the EOS date. We have created a migration guide to help you.


I didn't expect that Ionic and Angular 1 would be deprecated since the Angular 2 support is still listed as beta on the Kinvey home page.


We are not able able to migrate our app to Ionic/Angular 3 right now (it's a fundamental change).  So if you are not able to support Ionic 1 apps I'll need to figure out a different approach.


thanks for clarifying


Hello Joel,


I understand now. We don't currently support Kinvey Angular SDK 1.x anymore, however, you can still use Ionic 1.x on top of Angular 1.x using the Kinvey Angular SDK v3.5.0, no problem. Thanks for clearing that up.


Based upon your original post, I'll see what additional information about observables I can find and share with you.


Regards,


Billy Gee 

Hello Joel,


One more suggestion, while I'm looking for more Kinvey-related information about Observables, our Angular SDK Guide makes the following recommendations on extended reading about observables that might help. You can find the links in the Angular SDK Guide at the following URL.


http://devcenter.kinvey.com/angular/guides/concepts#Learnmore


We hope this helps. We'll get back with you soon with anything else we may find.


Regards,


Billy Gee





Thank you, i had read that.  It's not entirely clear, but now I've been beating on this for a while, I'll give it another go.


Glad to know that the V3 SDK is compatible with Angular 1.x.  I'll switch the code back now... ;)


I've been doing a lot of research. The problems seems to be that Observables are an Angular 2 construct that pretty much no one uses in the Angular 1.  The React paradigm makes sense when the whole app uses it.  it requires a major change in design so far as I can tell.


I cannot figure out the code sample for converting observables into promises.  If you have any sample code actually doing that, it would be super helpful.


thx

Answer
Joel,

Unfortunately, This is the only documentation available about converting observables into promises.

I have some suggestions and sample code directly from Engineering to turn an observable into a promise. Please note that we allow you to use any Promise library that adheres to the Promise/A+ specification. A good choice would be Bluebird found at the following URL.

 

http://bluebirdjs.com/docs/getting-started.html

https://github.com/tildeio/rsvp.js/.


The following code snippet assumes bluebirdjs as been correctly loaded.


 

var countPromise = Kinvey.CustomEndpoint.execute('getCountForCollection', { query: query.toQueryString().query, collectionName: collectionName });
var datastore = Kinvey.DataStore.collection(collectionName);
var promise = datastore.find(query).toPromise();
var promiseArray = [countPromise, promise];

if (gridOptions.data.skip === 0) {
  var newPromise = Kinvey.CustomEndpoint.execute('getTotalsForCollection', { query: query.toQueryString().query, collectionName: collectionName });
  promiseArray.push(newPromise);
}

Promise.all(promiseArray)
  .then(function(e) {
    // Some code that runs after the successful requests
  });



Note that this is sample code and may need a little rework in your environment to get it functioning correctly so please keep that in mind. We'll be happy to help you through any problems that you may encounter.

Thanks,
Pranav

 

Excellent, thank you very much, I'll dig in and learn from the example!


Login or Signup to post a comment