ngFor over object instead of array?

Question

Receiving this error in console:

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

services.ts

      private url = "https://api.iextrading.com/1.0/stock/market/batch?symbols=SNAP,fb,AIG%2b,GOOG,AAPL,AMZN&types=quote";

      constructor(private http: HttpClient) {}

      getCID(): Observable<any> {
        return this.http.get<any>(this.url);
      }

component.ts

      ngOnInit() {
        this.svc.getCID().subscribe(data => {
          this.cidData = data;
          console.log(data);
        });

component.html

    <div *ngIf="cidData">
      <ul>
        <li *ngFor="let x of cidData">
          <a routerLink="/companydetails/{{x.symbol}}">{{x.symbol}}</a>

API call gives

    {"GOOG":{"quote":{"symbol":"GOOG","companyName":"Alphabet Inc."}}, "SNAP":{etc...}

I think the issue is that cidData is not an array, but I'm not really sure how to return it as an array

Gigarthan · Accepted Answer · 2018-12-22 06:32:09Z

2

If your are using angular version 6 then you can use the built-in pipe keyvalue to iterate through objects

 <li *ngFor="let x of cidData | keyvalue">
      <a routerLink="/companydetails/{{x.value.quote.symbol}}">{{x.value.quote.symbol}}</a>

answered Dec 22, 2018 at 6:32

Gigarthan

2471 silver badge11 bronze badges

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

Comments

Nirina-aj · Accepted Answer · 2018-12-22 07:04:49Z

0

to turn your object into an array by Object.values(obj), you can see here

// object with your example here
    ngOnInit() {
        this.svc.getCID().subscribe(data => {
            this.cidData = data;
            let array = 
            Object.values(this.cidData.GOOD) 
            // here you have an array    
            console.log(array);
   });

answered Dec 22, 2018 at 7:04

Nirina-aj

2021 gold badge5 silver badges18 bronze badges

1 Comment

Nirina-aj Over a year ago

normally with a single object, otherwise it must be a table the response if there is more object

Collectives™ on Stack Overflow

ngFor over object instead of array?

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related