Why the object type is changing uot of 'subscribe'?

Question

I'm trying to get Coupon object from the server (REST API + Angular) ,

When im using 'subscribe' - inside the 'subscribe' the object from type 'Coupon', But outside of the subscribe It's becoming 'undefined'.

What do I have to do to keep his type outside the subscribe in another components?

log - 1 :
company-coupons.component.ts:24 **undefined**

log - 2 :
company.service.ts:32 
**Coupon {id: 44, title: "Test", startDate: "2000-01-01", endDate: "2000-02-02", category: 3, …}**


 fetchAllCoupons() {
this.storagService.getCompanyCoupons().subscribe(
  coupons => {
    this.coupons = coupons
    this.coupon = new Coupon(
      coupons[0].amount,
      coupons[0].category,
      coupons[0].endDate,
      coupons[0].id,
      coupons[0].imageURL,
      coupons[0].price,
      coupons[0].startDate,
      coupons[0].title,
    )
    console.log(this.coupon);
  })

}

getCompanyCoupons(): Observable<Coupon[]> {
const params = new HttpParams()
  .set("token", this.token)
return this.http.get<Coupon[]>('http://localhost:8080/api/company/get_company_coupons', { params })

}

getCoupons() {
this.fetchAllCoupons()
return this.coupons

}

EDIT: I want to clarify my question. Only out of ths 'subscribe' im getting 'undefined', and i trying ti keep his type outside the subscribe in another components

Does this answer your question? [How do I return the response from an Observable/http/async call in angular?](https://stackoverflow.com/questions/43055706/how-do-i-return-the-response-from-an-observable-http-async-call-in-angular) — R. Richards, Mar 07 '21 at 11:44
Firstly we need some informaton about this code. Where did you log coupon object in company-coupons,component? Secondly, why do you not use conversation in subscribe? For example: ***.subscribe(coupons as Coupon[] => { this.coupons = coupons; this.coupon = coupons[0]; } — Péter, Mar 07 '21 at 12:42
@R.Richards - thank you ,but no. I want to clarify my question. Only out of ths 'subscribe' im getting 'undefined', and i trying ti keep his type outside the subscribe in another components — Avinadav, Mar 07 '21 at 12:57
Could you add your `getCompanyCoupons` method to your question? — Fussel, Mar 07 '21 at 12:59
@Péter 1- ` ngOnInit(): void { this.coupons = this.companyService.getCoupons() console.log(this.coupons) } ` 2- The list is defined in here: (storage.service.ts) `getCompanyCoupons(): Observable { const params = new HttpParams() .set("token", this.token) return this.http.get('http://localhost:8080/api/company/get_company_coupons', { params }) }` — Avinadav, Mar 07 '21 at 13:18
please update your issue with implementation of getCoupons(). — Péter, Mar 07 '21 at 13:22

Péter · Answer 1 · 2021-03-07T13:58:15.263

If I understand well your sample the problem is that getCoupons() function does not wait to fetchAllCoupons()' end.

Illustrated:

1: call getCoupons()

2: call fetchAllCoupons() (in getCoupons())

3: call rest API (in fetchAllCoupons())

4: return this.coupons (in getCoupons());

5: in the future the response come back in fetchAllCoupons()'s method.

Try use Promise to wait fetchAllCoupons()'s end.

fetchAllCoupons() {
    return new Promise((resolve, reject) => {
        this.storagService.getCompanyCoupons().subscribe(
        coupons => {
            this.coupons = coupons
            this.coupon = new Coupon(
                coupons[0].amount,
                coupons[0].category,
                coupons[0].endDate,
                coupons[0].id,
                coupons[0].imageURL,
                coupons[0].price,
                coupons[0].startDate,
                coupons[0].title,
            )
            console.log(this.coupon);
            resolve("some argument");
       },
       (error) => reject())
    });
}

async getCoupons() {
    await this.fetchAllCoupons();
    return this.coupons;
}

The solution was to create a correct synchronization between the actions. Thanks to you, I was able to figure it out. — Avinadav, Mar 08 '21 at 13:28

Why the object type is changing uot of 'subscribe'?

1 Answers1