I am having trouble displaying my JSON data in my application. I have imported the HttpClientModule in app.module.ts, but I keep getting an error that says:
"" ERROR Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.""
boat.json
{
"Voilier": [
{
"img": "/assets/img/boat-img/voilier.jpg",
"longeur": 10,
"largeur": 20,
"tirantEau": 50,
"equipage": true,
"annexe": false
}
],
}
boat.service
configUrl: string = 'assets/json/boat.json';
constructor(private htpp: HttpClient) { }
getBoat(): Observable<IBoat[]> {
return this.htpp.get<IBoat[]>(this.configUrl);
}
component.ts
public user: IBoat[] = [];
constructor(private boatService: BoatService) { }
ngOnInit(): void {
this.boatService.getBoat()
.subscribe(data => {
this.user = data
});
}
html
<tbody>
<tr *ngFor="let bott of user">
<td>{{bott.longeur}}</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
</tbody>