How I can POST (http client) 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 company. In console I get response from server with data but I don't know how to display data by *ngFor loop in component.

Do you know how resolve this? Thank you for your help.

I expecting for display this data in component:

Name: IT company

City: Los Angeles

District: California

Id: 36786891 <- this is companyId

My code:

Response from server in console:

{
  city: "Los Angeles"
  district: "California"
  id: "36745687"
  name: "IT company"
}

model:

export class Fin {
  name: string;
  id: number;
  city: string;
  district: string;
}

service:

searchByCompanyId(companyId){
    return this.http.post(environment.appApiUrl + '/api/url', companyId, {responseType: 'text'});
  }

component.ts:

  finForm: FormGroup;
  finData: Fin[] = [];
  companyId: any;

  constructor(
    private apiService: ApiService,
  ) { }

  ngOnInit(): void {
    this.finForm = new FormGroup({
      companyId: new FormControl()
    });
  }

  submit() {
    this.apiService.searchByCompanyId(this.finForm.value).subscribe( response => {
      this.companyId = response;
      console.log(response);
    });
  }

component.html

<form fxLayout="column" fxLayoutGap="10px" [formGroup]="finForm" (submit)="submit()" class="form">
  <mat-form-field appearance="fill">
    <mat-label>ID</mat-label>
    <input matInput id="companyId" type="number" formControlName="companyId">
  </mat-form-field>

    <button mat-raised-button class="form-button" color="primary" type="submit">search</button>
</form>

<div *ngFor="let item of finData">
  <p>Meno: {{item.name}}</p>
  
  <p>ID: {{item.id}}</p>

  <p>District: {{item.district}}</p>
  
  <p>City: {{item.city}}</p>
</div>

finData data is empty as you are inserting response in companyId. Insert your response data in finData. Let me know if this solves the issue. — GMAC
– GMAC, Commented Mar 9, 2021 at 13:25
I don't see where you're setting finData...looks like you're logging it to the console, but not setting it in the subscribe call. — tcrite
– tcrite, Commented Mar 9, 2021 at 13:25

BizzyBob · Accepted Answer · 2021-03-09 14:16:48Z

1

You have two problems:

The variable name the template uses is called finData, but in your response you are populating companyId with the results.
*ngFor needs an array of data, but your api response is a single item.

You can easily address these with one simple change:

 this.apiService.searchByCompanyId(this.finForm.value).subscribe(response => {
   this.finData = [response];  // <-----
   console.log(response);
 });

Here's a working StackBlitz

answered Mar 9, 2021 at 14:16

BizzyBob

14.9k4 gold badges31 silver badges62 bronze badges

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

Comments

tcrite · Accepted Answer · 2021-03-09 13:27:45Z

0

change

this.companyId = response

to

this.finData = response

answered Mar 9, 2021 at 13:27

tcrite

5532 silver badges13 bronze badges

15 Comments

BeauNut Over a year ago

Yes I tried this but i have erorr -> Type 'string' is not assignable to type 'Fin[]'

GMAC Over a year ago

did you try finData.push(response) ?

tcrite Over a year ago

what are you expecting in the response? is it stringified?

tcrite Over a year ago

can you post the data you're getting back? if not, inspect the data to see if maybe the array is a property of the object.

tcrite Over a year ago

also, maybe you shouldn't be using an ngFor?

|

Collectives™ on Stack Overflow

How I can POST (http client) data from input and result data display to component in Angular?

2 Answers 2

Comments

15 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

15 Comments

Related