Angular - getting the values out of a promise

Question

I have a method getClients which is a call to a webservice giving back a Json answer with one of the fields is "response" ( giving all clients back as interface Data[] )

  getClients(): Observable<any> {
    // Get all clients from the database
    return this.http.get<any>(environment.apiURL + '/client/list' );
  }

I have in another component a method getResults() :

  filterData: Data[];

  getResults(): Promise<Data[]> {
    const promise = new Promise<Data[]>((resolve, reject) => {
      this.restApiService.getClients()
        .toPromise()
        .then( clients => {
          clients.response.json as Data[];
        })
        .catch(this.handleError);
        ;
    });

    return promise;
  }`

=> return promise; <= instead here I would like to "return this.filterData;" with just the data I need from promise as interface Data[]

Another component : receiving the results, here I would like it be the interface Data[]

  clients: Promise<Data[]>;

  constructor( private service: Service ) {
    this.clients = this.service.getResults();
    console.log('clientsssss : ' + this.clients);
  }

  ngOnInit() {
  }

The interface Data - this is the structure in the field "response"

export interface Data {
  clientName: string;
  clientId: number;
}

I don't succeed to get back from the method getResults the data I need ( interface Data )

I tried first as with the Observable, but it is a long list and it doesn't give any results ( empty ), so I read it is async so I need to use "promise".

This has been answered several times before. Data from a Promise (and an Observable) is _asynchronous_. It **cannot** be returned synchronously like you're attempting. Please read [this](https://stackoverflow.com/q/14220321/6513921) post in it's entirety to understand what is asynchronous data and how to use it. — ruth, Jan 05 '21 at 14:59
As a side note RxJS `toPromise()` function is being deprecated in RxJS 7 and will be gone in RxJS 8. See [here](https://indepth.dev/posts/1287/rxjs-heads-up-topromise-is-being-deprecated) for more info. — ruth, Jan 05 '21 at 15:01
Does this answer your question? [How do I return the response from an asynchronous call?](https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) — R. Richards, Jan 05 '21 at 15:11
Thank you for your help, I read many post of stackoverflow before posting. So it is better to go back with the Observable with subscribe etc like I had ? :O — Tasari, Jan 05 '21 at 15:12

Tasari · Accepted Answer · 2021-01-06T20:02:34.697

I read all the suggested page about asynchronous call.. A lot of people will get overwhelmed with all that information, even difficult to find the information you need...

THE SOLUTION IS HERE : ( for other people searching the same as me for many hours ! )

I have a method getClients which is a call to a webservice giving back a Json answer with one of the fields is "response" ( giving all clients back as interface Data[] )

  getClients(): Observable<any> {
    // Get all clients from the database
    return this.http.get<any>(environment.apiURL + '/client/list' );
  }

I adapted my method getResults() to :

  filterData: Data[];

...

  async getResults(): Promise<Data[]> {
    const promise = await new Promise<Data[]>((resolve, reject) => {
      this.restApiService.getClients()
        .toPromise()
        .then(
          res => {
            // Success
            this.filterData = res.response;
            resolve();
          },
          msg => {
            // Error
            reject(msg);
          }
        )
        .catch(this.handleError);
    });
    console.log('ress : ' + JSON.stringify(this.filterData));
    return promise;
  }

  private loading: boolean = false;

  constructor( private service: Service ) {
    this.loading = true;
    const promise = this.service.getResults();
    this.loading = false;
    console.log('clientssss : ' + this.service.filterData);
  }

The interface Data - this is the structure of the field "this.searchService.filterData" ( which after you can use in the html component )

export interface Data {
  clientName: string;
  clientId: number;
}

Ronnie

Angular - getting the values out of a promise

1 Answers1