The data for subscribing is coming late for another service-CodePudding

i am working on a ecommerce project, where i have created two service. Authservice and Order Service. As user get logs in the data is stored in User class and can be accessed through AuthService. But when i subscribe the data of User for authservice its coming late (async) and sometimes the id of user is unavailable for order service.

How can i wait a subscribe till the result come ? Below is my code example. Any help would be appreciated.

Below is the HTML File code:

 <div *ngIf="userOrders.length>0">
            <h2>Your Orders</h2>
            <p>Below are the orders and status</p>
            <table >
                <thead>
                    <tr>
                        <th>Order Id</th>
                        <th>Contact</th>
                        <th>Address</th>
                        <th>Amount</th>
                        <th>Updated At</th>

                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>{{userOrders.orderId}}</td>
                        <td>Doe</td>
                        <td>[email protected]</td>
                    </tr>

                </tbody>
            </table>
        </div>

Below is the ts File code:

this._authService.user.subscribe(res=>{
     this.userId=res.id;
      console.log(res)
    })
      console.log(this.userOrders)

      this._orderService.getUserOrders(this.userId).subscribe(res=>{
        this.userOrders=res;
        console.log(res)
      })

  }

Below is the error i am facing from frontend. As its response is coming async while HTML Loads with 0 length.

CodePudding user response：

Perhaps your problem solved, but it's not the correct approach, for this case you can use switchMap from rxjs library and pipe.

With this example you will resolve the asynchrony between the two endpoints, the first observable will emit its value and the "switchMap" will recive the value and will return an observable in this case with the user's id.

Finally you have only once subscription.

Learn more about switchMap

import { switchMap } from 'rxjs/operators'

    this._authService.user
      .pipe(
        switchMap(data => { // this data comes from this._authService.user obseravble
          this.userId = data.id;
          return this._orderService.getUserOrders(data.id); // or this.userId
        })
      )
      .subscribe(response => {
        this.userOrders = response;
      });

CodePudding user response：

There are a couple of solutions here. The simplest being the following. Here you would only call the getUserOrders(...) function after the authService has return a variable.

this._authService.user.subscribe(res=>{
 this.userId=res.id;
  this._orderService.getUserOrders(this.userId).subscribe(res=>{
    console.log(res)
  })
})
  console.log(this.userOrders)
}