Converting AngularJS deffered promise to AngularX observable for JSOM

Question

I am converting an AngularJS application to Angular 4 which gets some data from SharePoint. It is using the JSOM and for that the executeQueryAsync() method.

I would like to get the data with executeQueryAsync() from the server and store it in an observable in my service. The code I have to transform from old version (which is not from me) is below. Now I struggle with syntax when converting it into my service. I have absolute no plan how to convert this to Angular 4.

  getAllStatusReps($scope) {
    const deferred = $q.defer();

    const ctx = SP.ClientContext.get_current();
    const web = ctx.get_web();

    const statusList = web.get_lists().getByTitle(this.statusListName);
    const twitterList = web.get_lists().getByTitle(this.twitterListName);

    const statReps = statusList.getItems(this.getQueryForAllStatusReps());
    const twitReps = twitterList.getItems(this.getQueryForAllStatusReps());
    const queryText = `
      <View>
        <RowLimit>1</RowLimit>
        <ViewFields>{0}</ViewFields>
        <Query>
          <Where><IsNotNull><FieldRef Name=\'EPMStatusDate\' /></IsNotNull></Where>
          <OrderBy><FieldRef Name=\'ID\' Ascending= \'False\' /></OrderBy>
        </Query>
      </View>`;

    const statCamlQuery = new SP.CamlQuery();
    statCamlQuery.set_viewXml(String.format(queryText, this.getViewFields(true, false)));
    const lastStatRep = statusList.getItems(statCamlQuery);

    const twitCamlQuery = new SP.CamlQuery();
    twitCamlQuery.set_viewXml(String.format(queryText, this.getViewFields(false, false)));
    const lastTwitRep = twitterList.getItems(twitCamlQuery);

    ctx.load(statReps);
    ctx.load(twitReps);

    ctx.load(lastStatRep);
    ctx.load(lastTwitRep);

    ctx.executeQueryAsync(
      function () {
        deferred.resolve({
          statReps: statReps,
          twitReps: twitReps,
          lastStatRep: lastStatRep,
          lastTwitRep: lastTwitRep
        });
      },
      function (sender, args) {
        deferred.reject('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
      }
    );

    return deferred.promise;
  }

Answer 1

You can convert promises to observables by doing:

  const $thingWhichYouCanSubscribeTo = Observable.fromPromise(serviceOrThingThatReturnsPromise())

Could also try this at the bottom where you return a promise:

return Observable.fromPromise(deferred.promise);

Then you could do:

getAllStatusReps($scope).subscribe(()=>{...}, ()=>{...})

Also you could just re-write it using observables and create a service that returns a new observable:

   getAllStatusReps($scope)
{
    return new Observable(observer =>
    {
        const ctx = SP.ClientContext.get_current();
        const web = ctx.get_web();
        const statusList = web.get_lists().getByTitle(this.statusListName);
        const twitterList = web.get_lists().getByTitle(this.twitterListName);
        const statReps = statusList.getItems(this.getQueryForAllStatusReps());
        const twitReps = twitterList.getItems(this.getQueryForAllStatusReps());
        const queryText = `
      <View>
        <RowLimit>1</RowLimit>
        <ViewFields>{0}</ViewFields>
        <Query>
          <Where><IsNotNull><FieldRef Name=\'EPMStatusDate\' /></IsNotNull></Where>
          <OrderBy><FieldRef Name=\'ID\' Ascending= \'False\' /></OrderBy>
        </Query>
      </View>`;
        const statCamlQuery = new SP.CamlQuery();
        statCamlQuery.set_viewXml(String.format(queryText, this.getViewFields(true, false)));
        const lastStatRep = statusList.getItems(statCamlQuery);

        const twitCamlQuery = new SP.CamlQuery();
        twitCamlQuery.set_viewXml(String.format(queryText, this.getViewFields(false, false)));
        const lastTwitRep = twitterList.getItems(twitCamlQuery);

        ctx.load(statReps);
        ctx.load(twitReps);

        ctx.load(lastStatRep);
        ctx.load(lastTwitRep);

        ctx.executeQueryAsync(
            function ()
            {
                observer.next({
                    statReps: statReps,
                    twitReps: twitReps,
                    lastStatRep: lastStatRep,
                    lastTwitRep: lastTwitRep
                });
            },
            function (sender, args)
            {
                observer.error('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
            }
        );
    });
}