Angular - The aftermath of subscribing

Question

Angular - The aftermath of subscribing

I have been attempting to use subscribe to return a value to this.voucherDetails, but unfortunately, it doesn't seem to be working as expected.

Below is the code snippet for the getVoucherDetails function which includes the subscribe method.

voucherIDs: string[];
voucherDetails: Promise<any>[];

this.voucherIDs = ['JV-2005-50','JV-2005-40','JV-2005-30'];
this.voucherDetails = this.voucherIDs
.map(id => this.getVoucherDetails(id));
Promise.all(this.voucherDetails)
      .then(() => this.printService.onDataReady());

Here is the function that uses subscribe to userService to fetch data from the database.

getVoucherDetails(voucherid) {
    var splitvoucher = voucherid.split('-');
    var vouchertype = splitvoucher[0];
    var vouchermy = splitvoucher[1];
    var voucherno = splitvoucher[2];
    var vouchernotopass = vouchermy+"-"+voucherno;

    var voucherdate;
    var enteries;

    this.userService.getVoucher(vouchernotopass,vouchertype).subscribe(
        res => {
          voucherdate = res['voucherdate'];
          enteries = res['enteries'];
          return { "vouchertype":vouchertype, "vouchernumber": vouchernotopass, "voucherdate": voucherdate, "enteries":enteries};   
        }
    );       
}

However, the function currently returns undefined. Through my research, I have learned that you cannot directly return from a .subscribe method. I am still trying to figure out a solution to this issue.

angular typescript

Answer 1

Answer №1

When working asynchronously with Observables, callbacks are essential, similar to Promises. The recommended approach is to return an Observable (or Promise) within your method and allow the caller to subscribe to it:

fetchDetails(voucherid) {
    var splitvoucher = voucherid.split('-');
    var vouchertype = splitvoucher[0];
    var vouchermy = splitvoucher[1];
    var voucherno = splitvoucher[2];
    var vouchernotopass = vouchermy + "-" + voucherno;

    var voucherdate;
    var entries;

    return this.userService.getVoucher(vouchernotopass, vouchertype).pipe(
        map(res => {
            voucherdate = res['voucherdate'];
            entries = res['entries'];
            return {"vouchertype": vouchertype, "vouchernumber": vouchernotopass, "voucherdate": voucherdate, "entries": entries};
        })
    );       
}

Utilize the method as follows:

fetchDetails(id).subscribe(v => {
    console.log(v.vouchertype);
    console.log(v.vouchernumber);
    console.log(v.voucherdate);
});

In your scenario:

combineRequests( // combineRequests waits for Observables to complete and then merges their last emitted values.
    this.voucherIDs.map(id => this.fetchDetails(id) // array of observables
).subscribe(responses => {
    console.log(responses);
    this.allDetails = responses;
});

Answer 2

When working asynchronously with Observables, callbacks are essential, similar to Promises. The recommended approach is to return an Observable (or Promise) within your method and allow the caller to subscribe to it:

fetchDetails(voucherid) {
    var splitvoucher = voucherid.split('-');
    var vouchertype = splitvoucher[0];
    var vouchermy = splitvoucher[1];
    var voucherno = splitvoucher[2];
    var vouchernotopass = vouchermy + "-" + voucherno;

    var voucherdate;
    var entries;

    return this.userService.getVoucher(vouchernotopass, vouchertype).pipe(
        map(res => {
            voucherdate = res['voucherdate'];
            entries = res['entries'];
            return {"vouchertype": vouchertype, "vouchernumber": vouchernotopass, "voucherdate": voucherdate, "entries": entries};
        })
    );       
}

Utilize the method as follows:

fetchDetails(id).subscribe(v => {
    console.log(v.vouchertype);
    console.log(v.vouchernumber);
    console.log(v.voucherdate);
});

In your scenario:

combineRequests( // combineRequests waits for Observables to complete and then merges their last emitted values.
    this.voucherIDs.map(id => this.fetchDetails(id) // array of observables
).subscribe(responses => {
    console.log(responses);
    this.allDetails = responses;
});

Angular - The aftermath of subscribing

Answer №1

Similar questions

Challenges encountered when setting a value to a custom directive via property binding

How come the props aren't being passed from the parent to the child component? (React / TypeScript)

Building a search feature with a customized pipe in Angular

Instance of exported class declared in Typescript

The letter 'T' has the flexibility to be assigned with any type, even those that are completely unrelated

Limit the frequency of function calls in Typescript

Immediate update: Receiving a status of 400 "Bad request" when trying to make an HTTPPOST

Refreshing display with information received from web socket in Angular 5

Tips for retrieving a cropped image with Croppr.js

What is the process for importing types from the `material-ui` library?

Exploring the power of query parameters in Ionic 4

Having trouble setting a default value for your Angular dropdown? Looking for alternative solutions that actually work?

Unlock the Power of Angular with Custom Decorators: Accessing ElementRef Made Easy

How to filter ngFor elements in Angular 2 based on user input?

Ensure that the function's parameters are entered exclusively through TypeScript interfaces

Building a continuous timer loop in Angular using RxJS that adapts to changing durations within an array's objects

Using optional chaining on the left side in JavaScript is a convenient feature

What is the object pattern in Typescript?

Issue with ellipsis not functioning correctly on dynamic placeholders when they are in focus

Adding an external component to an Angular 2 project