Get value from Promise

Question

In a calling method, I need to extract an array of categories (Category[]) from the returned value of this method. How do I do this. I am not up to speed on promises.

getCategories() : Promise<Category[]> {
    return this.http.get(this.categoriesUrl).toPromise()
        .then(response => response.json().data as Category[])
        .catch(this.handleError);
}

And how do I extract a specific category from the result of the above getCategories() method? This is not working.

getCategory(id: string): Category {
 return this.getCategories()
   .filter((category: Category, index: number, array: Category[]) => {
            return category.id === id;
        });
}

You cannot, you need to wait for it. And get up to speed on promises before :-) — Bergi, May 31 '17 at 14:11
You probably should do `.then(response => response.json()).then(json => json.data)` in case the `.json()` method returns a promise — Bergi, May 31 '17 at 14:31

score 1 · Answer 1 · answered May 31 '17 at 14:10

1

Use then on the returned promise

getCategories().then((categories: Category[]) => {
    console.log(categories)
});

answered May 31 '17 at 14:10

Poul Kruijt

69,713
12
145
149

score 0 · Answer 2 · answered May 31 '17 at 14:18

getCategories() doesn't actually return the data like you expect, it actually returns a promise!

You will need to call '.then' in the code that calls this function.

Here is how you do it in it's most simplistic form.

getCategories().then(categories => {
    console.log(categories);
});

Promises are chained, so you will always need to call then at the end of your chain.

Teddy Sterne · Answer 3 · 2017-05-31T16:09:41.043

-2

You should not use a promise and should instead learn to embrace RxJS Observables. You can then subscribe to the result of the Observable inside of the calling function and save a reference to the data inside of the component (or whatever class calls the service function).

// my-service.ts
getCategories(): Observable<Category[]> {
    return this.http.get(this.categoriesUrl)
        .map(response => response.json().data as Category[]);
}

getCategory(id: string): Category {
    return this.getCategories()
        .selectMany(Observable.fromArray)
        .filter((category: Category, index: number) => {
            return category.id === id;
        })
        .first();
}

// my-component.ts
this.service.getCategories().subscribe((categories: Category[]) => {
    this.localCategories = categories;
})

The map function will modify the data that is received from the Observable. Note: the http request will not fire until something subscribes to it.

edited May 31 '17 at 16:09

answered May 31 '17 at 14:15

Teddy Sterne

13,774
2
46
51

I disagree. Promises have their place and this question is about promises. – NewZeroRiot May 31 '17 at 14:19
Teddy, I am following your solution. I am now trying to extract a single category from the array of categories returned by the getCategories() method. It is not working. I have modified my original question to show this. Could you take a look at it, please? – koque May 31 '17 at 15:17
You can use the selectMany operator to split each item in the array out into individual values and then filter them and take the first one. I will update my answer to demonstrate this – Teddy Sterne May 31 '17 at 17:07
Thanks for your help, Teddy. I am working on it. – koque May 31 '17 at 20:23
If my answer solved your issue I would appreciate you marking it as correct. – Teddy Sterne Jun 06 '17 at 15:52

Get value from Promise

3 Answers3