The tab1.page.ts is responsible for fetching a list of places through a GET request. Laravel returns the data in JSON format.
tab1.page.ts
export class Tab1Page implements OnInit {
places$: Place[];
constructor(
private placesService: PlacesService
) {}
ngOnInit() {
return this.placesService.getPlaces()
.subscribe(data => this.places$ = data);
}
}
This is the service I am using to retrieve the list of places. places.service.ts
import { HttpClient } from '@angular/common/http';
import { HttpHeaders } from '@angular/common/http';
import { environment } from 'src/environments/environment';
import { Router } from '@angular/router';
import { Place } from '../models/place.model';
@Injectable({
providedIn: 'root'
})
export class PlacesService {
constructor(private http: HttpClient, private router: Router) {
}
getPlaces () {
return this.http.get<Place[]>(environment.getBaseAddress() + 'places/get');
}
}
An error occurs in the console: "cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays."
I have provided the structure of the JSON as requested.
{
"places": [
{
"id": 1,
"place_id": "coktail",
"approved": "Review",
"requested_by_staff": "yes",
"activities_associated": "get work done",
"address": null,
"photo_places": null,
"id_owner_user": null,
"created_at": "2021-01-02T14:39:09.000000Z",
"updated_at": "2021-01-02T14:39:09.000000Z"
},
{
"id": 2,
"place_id": "librino",
"approved": "Review",
"requested_by_staff": "yes",
"activities_associated": "get work done",
"address": null,
"photo_places": null,
"id_owner_user": null,
"created_at": "2021-01-02T14:45:35.000000Z",
"updated_at": "2021-01-02T14:45:35.000000Z"
},
{
"id": 3,
"place_id": "librino2",
"approved": "Review",
"requested_by_staff": "yes",
"activities_associated": "get work done",
"address": null,
"photo_places": null,
"id_owner_user": null,
"created_at": "2021-01-02T14:46:19.000000Z",
"updated_at": "2021-01-02T14:46:19.000000Z"
}
]
}
Usercontroller.php
public function getPlaces(){
$places = Place::all();
if ($places)
return response()->json(['places'=>$places], 200);
else
return response()->json("places not found", 500);
}
tab1.page.html
<div *ngFor='let place of places$'>
<ion-grid>
<ion-row>
<ion-col>
<ion-card routerLink="/place-details" routerDirection="forward" style="background-image: url('https://oecdenvironmentfocusblog.files.wordpress.com/2020/06/wed-blog-shutterstock_1703194387_low_nwm.jpg?w=640');height: 150px;">
<ion-grid>
<ion-row>
<ion-col>
<ion-badge item-start>Type of activity {{ place.place_id }} </ion-badge>
</ion-col>
</ion-row>
</ion-grid>
<ion-grid style="padding-bottom:0px;">
<ion-row>
<ion-col>
<ion-card-title>Location {{ place.activities_associated }}</ion-card-title>
</ion-col>
</ion-row>
</ion-grid>
</ion-card>
</ion-col>
</ion-row>
</ion-grid>
</div>
What could be causing this issue?