Returning data from provider promise function in Javascript

Question

I have a provider that should allow me to return specific data from an API I need. I have this function that does it:

public getStoryCount(key: string, val: number) {
    return this.client.getEntries({
        'content_type': xxxxxxxxxxxxxx,
        [key]: val,
    }).then((entries:any) => {
        return entries.total;
    });
}

This is my first time really using promises, but I am trying to call this in a component to get the value. I want to be able to get the value entries.total which when I console.log gets output.

I am building out an array of data to use in my view like so:

this.homeScreen.push({
  'count': Provider.getStoryCount('sys.id', xxxx)
});

When I console.log the Provider function I can see the value in the promise and it looks like this:

__zone_symbol__state : true
__zone_symbol__value : 13 // this is the value I need to get

How can I save that number 13 to my array homeScreen['count'] value?? Or what am I doing wrong??

Answer 1

You are currently returning the Promise and not the actual value. That means modifying your component code to this:

Provider.getStoryCount('sys.id', xxxx)
    .then((entries:any) => {
        this.homeScreen.push({
          'count': entries.total
        });
    }
});

should work.

You could also make your Provider service get the value and store it as an Observable so components can then subscribe to the value.

Answer 2

Since promises are asynchronous, you are not actually returning entries.total like you might think.

You will probably need to provide your own callback function, or simply return the promise (generated by this.client.getEntries) and tack on a then to the result. It might look something like this:

public getStoryCount(key: string, val: number) {
    return this.client.getEntries({
        'content_type': xxxxxxxxxxxxxx,
        [key]: val,
    });
    // The 'then' will be added later
}

// ...

// Get the promise from the provider, and invoke 'then' here.
var storyCountPromise = Provider.getStoryCount('sys.id', xxxx);
storyCountPromise.then((entries:any) => {
    this.homeScreen.push({
      'count': entries.total
    });
});

Answer 3

It is an async operation. You need to pass a function in then :

Provider.getStoryCount('sys.id', xxxx)
  .then((total) => {
    this.homeScreen.push({
     'count': total
    });
  });

Answer 4

Firstly, to map the result of the promise to another value, use map.

public getStoryCount(key: string, val: number) {
    return this.client.getEntries({
        'content_type': xxxxxxxxxxxxxx,
        [key]: val,
    }).map((entries:any) => {
        return entries.total;
    });
}

Then when calling the promise returning function use then to get the result

Provider.getStoryCount('sys.id', xxxx).then((total) => ...use total...);