CODEWITHSUNDEEP
arraysangulartypescriptapiget
Alexander E. Alvarado
Alexander E. Alvarado

Reputation: 39

Getting this error when doing a GET request on Angular: Cannot find a differ supporting object '[object Object]

The tab1.page.ts should return a list of places by doing a GET request. Laravel is returning a file JSON.

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'm using to GET 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');
  }
}

I keep getting the error in the console: cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.

Added the JSON structure per request.

{
    "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 am I doing wrong?

Upvotes: 2

Views: 52

Answers (1)

Nicholas K
Nicholas K

Reputation: 15423

As the error clearly states, you are trying to iterate over an object but ngFor needs an array to iterate over. Make the following change since places contains the array information within the object places$:

<div *ngFor='let place of places$?.places'>
   <!-- rest of the code -->
<div>

Also, it is recommended to use $ only to indicate an observable. In your case, it's an array so its best practice to rename places$ to just places.

Upvotes: 2

Related Questions