How I POST data from input and result data display to component in Angular?

Question

I have problem with display data in component who I POST from input to server. In input I need enter companyId and after POST request server return specific data from product. In console I get response from server that it is undefined but in network tab I see that POST is successful and data came from server and I don't know how to catch and display them.

JSON:

{"products":[{"productId":"4","productName":"Trucker Classic 6","productCode":"TGP11136C","productGroupMiddleName":"Truckih","resourceUrl":"\/Product\/4","installmentTypes":[{"installmentTypeId":"1","installmentTypeName":"Single premium"},{"installmentTypeId":"2","installmentTypeName":"Annual instalments"}]}, {"productId":"5","productName":"Trucken Classic 8","productCode":"TGP48145C","productGroupMiddleName":"Truck4","resourceUrl":"\/Product\/5","installmentTypes":[{"installmentTypeId":"1","installmentTypeName":"Single premium"},{"installmentTypeId":"2","installmentTypeName":"Annual instalments"}]},{"productId":"6","productName":"Truckel Classic 6","productCode":"TAP60562C","productGroupMiddleName":"Truck8","resourceUrl":"\/Product\/6","installmentTypes":[{"installmentTypeId":"1","installmentTypeName":"Single premium"},{"installmentTypeId":"2","installmentTypeName":"Annual instalments"}]},

Code:

component.ts

testForm: FormGroup;
product: Products[] = [];

 constructor(
    private testService: testService,
  ) {
  }

ngOnInit(): void { 
    this.testForm = new FormGroup({
      productId: new FormControl()
    });
  }

submit() {
    this.testService.searchByProduct(this.testForm.value).subscribe(
        (response: any) => {
        this.product = response.products;
        console.log(this.product);
        },
        (error: any) => {
          console.error(error);
        });
  }

component.html

    <form fxLayout="column" fxLayoutGap="10px" [formGroup]="testForm" (submit)="submit()" class="form">
      <mat-form-field appearance="fill">
        <mat-label>ID product</mat-label>
        <input matInput id="productId" type="number" formControlName="productId">
      </mat-form-field>
    
      <button mat-raised-button class="form-button" color="primary" type="submit">search</button>
    </form>

**<!--- I NEED TO SHOW RESPONSE DATA HERE --->**
        <div *ngFor="let i of product">
          <p>{{i.productId}}</p>
          <p>{{i.productName}}</p>
        </div>

model.ts

export class Products {
  productId: number;
  productName: string;
  productCode: string;
}

service.ts

searchByProduct(productId) {
    return this.http.post(environment.ApiUrl + '/api/urlapi', productId, {responseType: 'text'});
  }

Answer 1

I see several issues, but I'm not sure why response should be undefined.

• your searchByProduct method returns an Observable of type string because you passed responseType: 'text' in the second parameter, but you want the products as Javascript objects. Remove the responseType and the response will be parsed as objects
• I think this.testForm.value will evaluated to { productId: **/some number**/} not the number directly