I'm encountering an issue while attempting to showcase data from my JSON file. Despite extensively researching on StackOverflow, I am unable to find a solution to the error at hand.
The error message reads: Error trying to diff '[object Object]'. Only arrays and iterables are allowed
JSON
{
"flags": [
{
"id": 1,
"mnemo": "KHM",
"libelle": "Cambodge",
"bigramme": "KH"
},
{
"id": 2,
"mnemo": "KHM",
"libelle": "France",
"bigramme": "FR"
},
]
}
Typescript File (.ts)
export class HomepageComponent implements OnInit {
postArray: Ipost[] = [];
constructor(private homeService: HomeService, private router: Router) { }
ngOnInit(): void {
this.getAllNations();
}
getAllNations() {
this.homeService.getAll().subscribe(result => {
this.postArray = result;
console.log(this.postArray);
});
}
}
HTML Template
<div class="col-1 px-0" *ngFor="let post of postArray">
<div *ngIf="post.id >= 13">
<span>{{post.libelle}}</span>
</div>
</div>
Interface Definition
export interface Ipost {
id:number,
mnemo:string,
libelle:string,
bigramme:string
}