Displaying JSON Data Using Angular 7

Question

I am attempting to display this JSON data from the server:

{"buySell":
[
  {"date":"2015-03-02","close":120.351,"buySell":"Sell"},
  {"date":"2019-01-02","close":157.2455,"buySell":"Buy"}
],

"firstReturn":0.62987323647548421,
"sell":{"date":"2018-10-08","close":222.0396},
"buy":{"date":"2018-05-02","close":173.9216}
}

This is how I format it in HTML:

<mat-list *ngIf="buySellData$ | async as stock else noData">
   <mat-list-item *ngFor="let item of stock ">
       {{item.listOfBuySell | json}} 
   </mat-list-item>
</mat-list>

This is the stock format

stock: Cagr[];

and carg.ts is:

import { Istock } from './istock'
import { Dateclose } from './dateclose'

export class Cagr {
    listOfBuySell: Istock;
    close: number;
    sell: Dateclose;
    buy : Dateclose;
 }

istock.ts is:

 export class Istock {
    date: Date;
    close: number;
    buysell: string;
}

and finally dateclose.ts

export class Dateclose {
    date: Date;
    close: number;
}

This is the error I get in displaying:

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

Are you confusing classes and interfaces? Classes have constructors. — JGFMK
– JGFMK, Commented Feb 18, 2019 at 23:03

Sergey Mell · Accepted Answer · 2019-02-18 23:28:25Z

1

You are trying to iterate over an object but not array. This causes such error.

You should check what exactly you have as a result in buySellData$ | async.

answered Feb 18, 2019 at 23:28

Sergey Mell

8,0501 gold badge29 silver badges53 bronze badges

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

Collectives™ on Stack Overflow

Displaying JSON Data Using Angular 7

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related