Working with a promise in Typescript

Question

I have a function that calls an http.get to an API and it has a return type of promise. I'd like to handle/sort the returned data. Do I need to convert it from a Promise into an array of objects to iterate over it? Here is the function:

  getCandidates(): Promise<Candidate[]> {   
    return this.http.get(url)
      .retry(2)
      .map(x => {
        var result: Candidate[] = x.json();
        return result;
      })
      .toPromise();
  }

and I call the function by stating:

this.candidates = this.getCandidates();

So I now have this candidates object of type Promise<Candidate[]> but I'd like to have it be of type Candidate[] so I can work with it, e.g. candidates.length etc. How should I go about this? Maybe I'm thinking of this the wrong way.

Edit: trying to use the code.

ionViewDidLoad() {
    //Retrieves candidates and stores into an array
    this.getCandidates().then(candidates => this.candidates = candidates);
    console.log(this.candidates);
  }

The console logs an empty array. I also tried passing it to a sort function but none of the data was present. Which is strange because in the html if I *ngFor over candidates I get the data (which is why I thought it was working properly before).

@ZacharySchwatz, you can sort (or do whatever you need) and return the result — Aleksey L.
– Aleksey L., Commented Sep 19, 2017 at 6:05

Faly · Accepted Answer · 2017-09-19 06:19:49Z

1

You can retrieve your candidates in ngOnInit, save it into this.candidates and do what you want to do with it (sorting,..)

  candidates: Candidate[] = [];
  
  ngOnInit() {
    this.getCandidates().then(candidates => this.candidates = candidates);
  }
  
  getCandidates(): Promise<Candidate[]> {   
    return this.http.get(url)
      .retry(2)
      .map(x => x.json as Candidate[])
      .toPromise();
  }

answered Sep 19, 2017 at 6:19

Faly

13.4k2 gold badges21 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Zachscs Over a year ago

giving it a shot now, I'm in Ionic so not using ngOnInit but there is ionViewDidLoad which is sufficient in this scenario correct?

Zachscs Over a year ago

I actually have an issue now, when I try to use this.candidates elsewhere in the code or even try to console.log(this.candidates), it is undefined.

Faly Over a year ago

You have to show the code where you use this.candidates

Faly Over a year ago

It's because of the asynchronous aspect of promise: this.getCandidates().then(candidates => this.candidates = candidates); console.log(this.candidates); In this code, you do console.log(this.candidates) just after calling this.getCandidates(). The console.log is executed before the execution of this.candidates = candidates; this.candidates remains undefined until the promise resolve. If you change your code like below, you'll see this.candidates in console: this.getCandidates().then(candidates => { this.candidates = candidates; console.log(this.candidates); });

Zachscs Over a year ago

thanks, I got it to work that way, instead of calling console log I call my sort function there.

Collectives™ on Stack Overflow

Working with a promise in Typescript

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related