I've been grappling with this error I encountered while working on Angular 12.
Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.
This is the code for my service:
import { HttpClient } from '@angular/common/http';
import { Catalog } from './../Models/Catalog';
import { Observable } from 'rxjs';
const baseUrl = 'http://localhost:8080/'
@Injectable ({
providedIn: 'root'
})
export class CatalogService {
constructor(private http: HttpClient) { }
getAll(): Observable<Catalog[]> {
console.log(this.http.get<Catalog[]>(baseUrl));
return this.http.get<Catalog[]>(baseUrl);
}
Here's the component code:
import { Router } from '@angular/router';
import { CatalogService } from './../../Services/catalog.service';
import { Catalog } from "./../../Models/Catalog";
import { FormGroup, FormBuilder } from '@angular/forms';
@Component({
selector: 'app-catalog',
templateUrl: './catalog.component.html',
styleUrls: ['./catalog.component.scss']
})
export class CatalogComponent implements OnInit {
catalog?: Catalog[];
currentCatalog: Catalog = {};
currentIndex = -1;
constructor(private catalogService: CatalogService) { }
ngOnInit(): void {
this.retrieveCatalog();
}
retrieveCatalog(): void {
this.catalogService.getAll()
.subscribe(
data => {
this.catalog = data;
console.log(data);
},
error => {
console.log(error);
});
}
Below is the HTML part:
<div class="containter">
<table class="table table-bordered">
<thead>
<tr>
<th scope="col">Id</th>
<th scope="col">Model</th>
<th scope="col">Price</th>
<th scope="col">Specification</th>
<th scope="col">Image</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let catalog of catalog; let i = index">
<th scope="row">{{catalog.id}}</th>
<td>{{catalog.model}}</td>
<td>{{catalog.price}}</td>
<td>{{catalog.specification}}</td>
<td>{{catalog.image}}</td>
</tr>
</tbody>
</table>
</div>
I was following a tutorial on using serializable with the MEAN stack:
However, upon loading the page, I encountered the mentioned error.
My queries are:
Why is this happening? (I'm fairly new to Angular)
Is this the correct way to return an array with Observables? "this.http.get<Catalog[]>(baseUrl);"
EDIT: Output for the method in the service class:
Observable
operator: MapOperator {thisArg: undefined, project: ƒ}
source: Observable
operator: FilterOperator
predicate: (event) => event instanceof HttpResponse
thisArg: undefined
[[Prototype]]: Object
call: ƒ call(subscriber, source)
constructor: class FilterOperator
[[Prototype]]: Object
source: Observable
operator: MergeMapOperator {concurrent: 1, project: ƒ}
source: Observable {_isScalar: false, _subscribe: ƒ}
_isScalar: false
[[Prototype]]: Object
_isScalar: false
[[Prototype]]: Object
_isScalar: false
[[Prototype]]: Object
Edit: Output from the subscribe method
Subscriber {closed: false, _parentOrParents: null, _subscriptions: Array(1), syncErrorValue: null, syncErrorThrown: false, …}
closed: true
destination: SafeSubscriber
closed: true
destination: {closed: true, next: ƒ, error: ƒ, complete: ƒ}
isStopped: true
syncErrorThrowable: false
syncErrorThrown: false
syncErrorValue: null
_complete: undefined
_context: null
_error: error => { console.log(error); }
_next: data => {…}
_parentOrParents: null
_parentSubscriber: null
_subscriptions: null
[[Prototype]]: Subscriber
isStopped: true
syncErrorThrowable: true
syncErrorThrown: false
syncErrorValue: null
_parentOrParents: null
_subscriptions: null
[[Prototype]]: Subscription
complete: ƒ complete()
constructor: class Subscriber
error: ƒ error(err)
next: ƒ next(value)
unsubscribe: ƒ unsubscribe()
_complete: ƒ _complete()
_error: ƒ _error(err)
_next: ƒ _next(value)
_unsubscribeAndRecycle: ƒ _unsubscribeAndRecycle()
Symbol(rxSubscriber): ƒ [_internal_symbol_rxSubscriber__WEBPACK_IMPORTED_MODULE_2__.rxSubscriber]()
[[Prototype]]: Object
Thank you!