Synchronous Call Angular 2

[Sumit Rohatgi]

I have multiple http get calls (one listed below which works asynchronously) and i want them to be synchronous not async.  So that the output of one can be used in another and so on

Caller

        this._myGroupService.getGroupsNameJSON()

            .subscribe(data => {

                   console.log("JSON.stringify(data));

            });

Called

  getGroupsNameJSON() {

        let header = new Headers();

        header.append("Content-Type", "application/json; odata=verbose");

        header.append("Accept", "application/json; odata=verbose");

        

         return this.http.get(this._url, {

            headers: header

        }).map(this.extractData)

    }

    private extractData(res: Response) {

        let body = JSON.stringify(res.json());

        return body || {};

    }

[Sander Elias]

Hi Celerity,

If you want synchronous results, you need to use native JS, as Angular doesn't provide that.

However, you can easily string multiple async calls together.

might look like this:

import { Injectable } from '@angular/core';

import { Http, Headers, Response } from '@angular/http';

@Injectable()

export class ServiceNameService {

    constructor(private http:Http) { }

    getResult() {

        return this.firststep()

          .map(this.secondstep)

          .map(this.thirthstep)

          .subscribe(data => {

              /* all data is available here */

          });

    }

    firststep() {

        return this.http.get('url')

            .map((response: Response) => response.json())

            .map(data => ({firstep: data}))

            ;

    }

    secondstep(data) {

        /* use data to prepare call */

        return this.http.get('url')

            .map((response: Response) => response.json())

            .map((r) => data.secondStep = r);

    }

    thirthstep(data) {

        /* use data to prepare call */

        return this.http.get('url')

            .map((response: Response) => response.json())

            .map((r) => data.thirthStep = r);

    }

}

Hope this helps you a bit,

Regards

Sander

[celerity12]

Hi Sander,

     I get error in the call of    .map(this.secondstep) in the GetResult method

EXCEPTION: Cannot read property 'get' of undefined

As you see below, call to 

 this.getUserGroups() works but when calling 

  .map(this.getUserProps) it fails

    IsEditable() {

        console.log("IsEditable ...");

        return this.getUserGroups()

            .map(this.getUserProps)

            .subscribe(data => {

                /* all data is available here */

                console.log("Is Editable ... " + JSON.stringify(data))

            });

    }

    getUserProps(data) {

        console.log("getUserProps ...");

        let header = new Headers();

        header.append("Content-Type", "application/json; odata=verbose");

        header.append("Accept", "application/json; odata=verbose");

        return this.http.get(this._url, {

            headers: header

        }).map((response: Response) => response.json())

            .map((r) => data.getUserProps = r);

    }

Thank you

[celerity12]

To be more specific the error is     err = TypeError: Cannot read property 'get' of undefined at MapSubscriber.UserPermissionService.getUserProps

On Monday, March 6, 2017 at 8:41:22 PM UTC-8, Sander Elias wrote:

[celerity12]

i don't think we can use map here as http and other functions are not available in the map called function it's a scope issue

[celerity12]

On Wednesday, March 8, 2017 at 8:31:43 PM UTC-8, celerity12 wrote:

i don't think we can use map here as http and other functions are not available in the map called function it's a scope issue

On Wednesday, March 8, 2017 at 5:47:40 PM UTC-8, celerity12 wrote:

To be more specific the error is     err = TypeError: Cannot read property 'get' of undefined at MapSubscriber.UserPermissionService.getUserProps

Hi Sander,

     I get error in the call of    .map(this.secondstep) in the GetResult method

EXCEPTION: Cannot read property 'get' of undefined

As you see below, call to 

 this.getUserGroups() works but when calling 

  .map(this.getUserProps) it fails

    IsEditable() {

        console.log("IsEditable ...");

        return this.getUserGroups()

            .map(this.getUserProps)

            .subscribe(data => {

                /* all data is available here */

                console.log("Is Editable ... " + JSON.stringify(data))

            });

    }

    getUserProps(data) {

        console.log("getUserProps ...");

        let header = new Headers();

        header.append("Content-Type", "application/json; odata=verbose");

        header.append("Accept", "application/json; odata=verbose");

        return this.http.get(this._url, {

            headers: header

        }).map((response: Response) => response.json())

            .map((r) => data.getUserProps = r);

    }

Thank you

 

On Monday, March 6, 2017 at 8:41:22 PM UTC-8, Sander Elias wrote:

[Sander Elias]

Looks like you didn't inject http into your class.

[celerity12]

http is injected in the constructor

constructor(private http: Http) {

[Sander Elias]

Oh, I made a typo in my example, the final map should return data. returning an assignment is not gonna work.

.map((r) => data.getUserProps = r);

should be:

.map((r) => (data.getUserProps = r,data));

I'm not entirely sure if that's the root cause of your issue.

Regards

Sander

[John]

There is a synchronous http library called sync-request.

sync-request

And, a typescript strongly-typed wrapper library called ts-sync-request.

ts-sync-request

You can see if these are useful to you.