Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays. in angular7

Question

I trying to get data using web api in angular7 but i'm facing [object object] issue.

auth.service.ts

getCareer(){
    return this._HttpClient.get('http://localhost:49345/api/website/getCarrier');
    }

component.ts

export class careerComponent implements OnInit{

    getCareer$: object;

     constructor(private _AuthService: AuthService){ }

     ngOnInit(){
        this._AuthService.getCareer().subscribe(
        data => this.getCareer$ = data
    );
    }


}

component.html

<div class="col-xl-6" *ngFor="let career of getCareer$">
                    <h2>test</h2>
                    <h3>{{career.designation}}</h3>
                </div>

Issue/console screenshot

API Screenshot

How can i solve it?

i think u need to provide a type for the observable ( like an interface or class) or use map funciton, you will get some idea here stackoverflow.com/questions/50192815/… — Nilesh Jain
– Nilesh Jain, Commented Oct 29, 2018 at 12:40
Possible duplicate of Error trying to diff '[object Object]'. Only arrays and iterables are allowed in angular — Ludevik
– Ludevik, Commented Oct 29, 2018 at 12:40

Abidh · Accepted Answer · 2018-10-29 12:57:29Z

0

`ngOnInit(){
    this._AuthService.getCareer().subscribe(
    data => { this.getCareer$ = data.data.map(item => {
            return item.designation
         })
});
}`

change the code as above..hope it will work. now the getCareer$ contains all the designations

answered Oct 29, 2018 at 12:57

Abidh

4672 gold badges5 silver badges14 bronze badges

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

4 Comments

Rohit Verma Over a year ago

how to get in component.html?

Abidh Over a year ago

<div class="col-xl-6" *ngFor="let career of getCareer$"> <h2>test</h2> <h3>{{career}}</h3> </div>

Abidh Over a year ago

can you please check data inside getCareer$ ?

Abidh Over a year ago

input = {"data":[{designation:"desig1"},{designation:"desig2"},{designation:"desig3"}]} this is the sample data i was trying with... and the code is expected = input.data.map(item => {return item.designation})

Collectives™ on Stack Overflow

Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays. in angular7

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related