How to load data from API to input fields?

Question

I would like to make a "user profile" page. It should load all of the data of the registered user to input fields (if the data exists). Then everyone can edit these (or add new ones). The first step would be to load the data to the specific input fields. I sucessfully make a GET request (everything is good in the console), but the input fields remain empty.

The page after Get request:

The component:

getData() {
    this.apiService.getUser(this.id, this.email, this.password).subscribe(
      (user) => {
        this.user = user;
        this.bankArray.push(user.banks);
      },
    );
  }

HTML:

<form>
    <h3>Name</h3>
    <div *ngFor="let obj of user.personal">
        <input
          type="text"
          placeholder="Title"
          name="title"
          [(ngModel)]="obj.title"
        />
        <br />
        <input
          type="text"
          placeholder="Forename"
          name="foreName"
          [(ngModel)]="obj.foreName"
        /><br />
    </div>

    <h3>Financial</h3>
    <button (click)="addNewBank()">+</button>
    <div *ngFor="let obj of bankArray; let i = index">
      <button (click)="removeBank(i)">-</button>
      <br />
      <input
        type="text"
        placeholder="Bank name"
        name="bankName{{ i }}"
        [(ngModel)]="obj.bankName"
      /><br />
      <input
        type="number"
        placeholder="IBAN"
        name="iban{{ i }}"
        [(ngModel)]="obj.iban"
      /><br />
</form>

The Console log(user):

in get data u are assigning to user but in ngModel u want to take from personal ? What is personal — Cagri Tacyildiz
– Cagri Tacyildiz, Commented Jun 14, 2020 at 11:40

Sunil V Shetty · Accepted Answer · 2020-06-14 14:06:45Z

1

I observed that you are pushing the banks details into bankArray from response.

Since banks is an array of elements you cannot directly push whole array into bankArray, you have to iterate/loop the banks and insert one by one into bankArray

Here is the updated code,

getData() {
this.apiService.getUser(this.id, this.email, this.password).subscribe(
  (user) => {
    this.user = user;
    user.banks.forEach(bank => {
         this.bankArray.push(bank);   
    });
  },
);

}

And regarding personal data, if you see Console Log which you have attached personal data is null

answered Jun 14, 2020 at 14:06

Sunil V Shetty

912 bronze badges

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

1 Comment

gmark11 Over a year ago

Thank you! Exactly this was the problem.

Kiran Shinde · Accepted Answer · 2020-06-14 13:35:52Z

0

This may be happening, you html is not updating after getting response from API

You should use *ngIf to make sure html is updated after getting response from API

<ng-container *ngIf="bankArray.length">
  <div *ngFor="let obj of bankArray; let i = index">
    <button (click)="removeBank(i)">-</button>
    <br />
    <input
      type="text"
      placeholder="Bank name"
      name="bankName{{ i }}"
      [(ngModel)]="obj.bankName"
    /><br />
    <input
      type="number"
      placeholder="IBAN"
      name="iban{{ i }}"
      [(ngModel)]="obj.iban"
    /><br />
   </div>
 </ng-container>

answered Jun 14, 2020 at 13:35

Kiran Shinde

6,0326 gold badges30 silver badges45 bronze badges

Collectives™ on Stack Overflow

How to load data from API to input fields?

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related