Interpolate an object from rest API-CodePudding

hello I'm having trouble on how to interpolate the object from rest API, I can see the objects in console log but I can't bind it in a label to my table

this is the object I want to interpolate in my table

clerk: name: "May Anne" [[Prototype]]: Object

this is my service.ts

//fetch discounte Bill
  fetchDiscountedBill(): Observable<any>{
    return this.http.get(this.baseUrl   '/discountedBill');
  }

this is the model.ts

 export class BillingModel{
        clerk : {
            name: string;
        }
    }

I call the model.ts to my table.component.ts with this

billingModel: BillingModel = {
      clerk: {
        name: ''
      }
    };

and create a method with this

 getDiscountedBill(){
        this.dataStorageService.fetchDiscountedBill().subscribe(resp => {
          console.log(resp)
          this.billingModel = data;;
        }, err => {
          console.log(err)
        });
      }

and this is the label I want to interpolate or bind the object

<tr>
        <td colspan="4">Attending Clerk: </td>
    </tr>

Please help thank you!

CodePudding user response：

I think you can use this.BillingModel.clerk = resp.clerk in component method

CodePudding user response：

In your ts file within subscribe, you can assign the value as:

this.billingModel.clerk = resp.clerk;

and then display the clerk name within your html template using interpolation as:

{{billingModel?.clerk?.name}}

If your HTTP response data structure matches your defined model, then you can use the same type in your service class method as:

fetchDiscountedBill(): Observable<BillingModel> {
    return this.http.get<BillingModel>(this.baseUrl   '/discountedBill');
}

and within subscribe you can simply do:

this.billingModel = resp;

Also when defining your model, you don't need to define it as a class, but can define it as an interface:

export interface BillingModel {
    clerk: {
        name: string;
    }
}

CodePudding user response：

i also have same issue data show in console but not show in table

and one think what name of array show in console that name write in ts like that res['name of array']

try this

 getDiscountedBill(){
        this.dataStorageService.fetchDiscountedBill().subscribe(resp => {
          console.log(resp)
          this.billingModel = res['orderList']; <==  not work then try below  ;
          this.billingModel = res['clerk']; <== this will work 
          this.billingModel = res['clerk'].name; <== if you want to display name of clerk then try this

        }, err => {
          console.log(err)
        });
  }