How to render data to html form page

Question

I am trying to update the user profile page. I am not being able to load the data to the html page. I am getting following error:

Error: Cannot find a differ supporting object '[object Object]' of type '[object Object]'. NgFor only supports binding to Iterables such as Arrays.
    at NgForOf.ngOnChanges (http://localhost:8100/build/vendor.js:45280:27)
    at checkAndUpdateDirectiveInline (http://localhost:8100/build/vendor.js:12445:19)
    at checkAndUpdateNodeInline (http://localhost:8100/build/vendor.js:13951:20)

people-services.ts

export class PeopleServiceProvider {
loadUser(){
        return this.http.get('https://randomuser.me/api/?results=1')
                .map(res => res.json());
    }
}

profile.ts

import { HttpClient, HttpHeaders } from '@angular/common/http';
import 'rxjs/add/operator/map';
import { PeopleServiceProvider } from '../../providers/people-service/people-service';
export class ProfilePage {
    data:any = {};
    public form: FormGroup;
    public foundUser: {};

    loadUser(){
        this.peopleService.loadUser()
        .subscribe((res)=>{
            this.foundUser = res.results[0];
        });
    }

    ionViewDidLoad() {
        this.loadUser();
    }
}

profile.html

<ion-content padding class="background">
    <ion-card>
        <form [formGroup]="form" (ngSubmit)="saveEntry()">
            <ion-list *ngFor="let user of foundUser">
                <ion-item>
                    <ion-label floating>Name</ion-label>
                    <ion-input type="text" name="cust_name" formControlName="cust_name" value="{{user.name.last}}" ></ion-input>
                </ion-item>

                <ion-item>
                    <ion-label floating>Username</ion-label>
                    <ion-input type="text" name="username" formControlName="username" [(ngModel)]="data.username"></ion-input>
                </ion-item>
            </ion-list>
            <button ion-button block outline color="light">Update</button>
    </ion-card>
</ion-content>

I am very new to ionic framework. I could not figure out the issue.

"NgFor only supports binding to Iterables such as Arrays" Means that foundUser isn't an array or other iterable. NgFor is used for looping through arrays. I think you can fix it by changing the assignment to this.foundUser = res.results (skipping the indexing) — ShamPooSham
– ShamPooSham, Commented Jan 3, 2018 at 15:29
@ShamPooSham, i already tried removing index. But still i get the same issue — nas
– nas, Commented Jan 3, 2018 at 15:42
How can you have access to this.peopleService.loadUser() if PeopleServiceProvider is not injected in the ProfilePage constructor ? Any instance of PeopleServiceProvider in your code ? — Sinan
– Sinan, Commented Jan 3, 2018 at 17:17
is loadUser returning a list or a user. if a user then the ngFor is your issue in html probably. let us know what the json looks like — Philip Brack
– Philip Brack, Commented Jan 3, 2018 at 18:40

Rohan J Mohite · Accepted Answer · 2018-01-03 16:45:24Z

2

Change public foundUser: {};

to public foundUser= [];

and hopefully, your service is returning correct data. can you please post your output from service.

answered Jan 3, 2018 at 16:45

Rohan J Mohite

2,6231 gold badge14 silver badges19 bronze badges

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

Collectives™ on Stack Overflow

How to render data to html form page

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related