How to assign variables to data passed through a WEB API in Angular?

Question

I am consuming a WEB API endpoint that returns product data. However, upon subscribing, I want to assign variables to this data to be used as part of a bar chart generated using Chart.js (Not relevant).

The data that is returned can be seen as follows:

What I have tried is the following:

generateReport() {
    if(this.service.reportForm.valid) {
      this.service.getData().subscribe
      (res => {
        console.log(res)
        let productNames = res['reportData'].map(res => res.ProductName);
        let avgQuantityOrdereed = res['reportData'].map(res => res.AverageQuantityOrdered);
        let orderQuantity = res['reportData'].map(res => res.ProductOrders.orderQuantity)
      })
    }
  }

However, I get the error: "Element implicitly has an 'any' type because expression of type '"reportData"' can't be used to index type 'Object'" under the "res['reportData'].

Is there any alternative way to doing what i tried above? And also, what is wrong with the way i did it?

You should be getting data the Rxjs way using functional operators — Michael Kang
– Michael Kang, Commented Jun 9, 2021 at 9:20

Michael Kang · Accepted Answer · 2021-06-09 09:32:19Z

1

Using rxjs functional operators, you can achieve the same thing with:

export class ReportComponent {
 clickObservable$: Observable<Event> = fromEvent(document,'click');
 generateReport$: Observable<string[]> = this.clickObservable$.pipe(
        filter(t => this.service.reportForm.valid),
        switchMap(t => this.service.getData()),
        map(t => t.reportData),
        map(t => t.productNames)
  )
}

HTML Template

 <ul>
    <li *ngFor="let productName of generateReport$ | async">
       {{ productName }}
    </li>
 </ul>

answered Jun 9, 2021 at 9:32

Michael Kang

53k16 gold badges108 silver badges138 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

SeventhWarhawk · Accepted Answer · 2021-06-09 09:15:19Z

0

I realized that i simply needed to pass 'res' as a type of any:

generateReport() {
    if(this.service.reportForm.valid) {
      this.service.getData().subscribe
      ((res:any) => {
        console.log(res)
        let productNames = res['reportData'].map((res: any) => res.ProductName);
        let avgQuantityOrdereed = res['reportData'].map((res: any) => res.AverageQuantityOrdered);
        let orderQuantity = res['reportData'].map((res: any) => res.ProductOrders.orderQuantity)
        console.log(productNames)
      })
    }
  }

answered Jun 9, 2021 at 9:15

SeventhWarhawk

1,32310 silver badges27 bronze badges

Collectives™ on Stack Overflow

How to assign variables to data passed through a WEB API in Angular?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related