I'm currently working on the frontend development of a crud application. While implementing lazy pagination, I encountered an error
Error: NG0900: Error trying to diff '[object Object]'. Only arrays and iterables are allowed
I have searched through numerous questions with the same error, but none provided a solution
Note: I attempted using the pipe | keyvalue, but it did not work
Here is a snippet of the object being passed to the pagination = cities:
[
{
"id": 6,
"name": "Florianópolis",
"population": null,
"state": "SC"
},
...
]
Below is the service where the request is made:
import { HttpClient, HttpParams } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { environment } from 'src/environments/environment';
import { Pageable } from '../pageable';
import { RequestUtil } from '../request-util';
import { City } from './city';
import { CityFilter } from './cityFilter';
@Injectable({
providedIn: 'root'
})
export class CityService {
apiUrl = environment.apiUrl;
citiesUrl = environment.slashApi + '/cities';
constructor(private http: HttpClient) { }
list(filter: CityFilter, pageable: Pageable): Observable<any>{
const options = RequestUtil.buildOptions(Object.assign(filter, pageable));
return this.http.get<any>(`${this.citiesUrl}`, options);
}
...
My component.ts:
export class CitiesComponent implements OnInit, OnChanges {
@ViewChild('grid') grid: any;
cities: any[] = [];
state = new State();
states = [];
selectedState:any = '';
filter = new CityFilter();
pageable = new Pageable();
totalRecords = 0;
@BlockUI('list-cities') blockUI!: NgBlockUI;
constructor(private cityService:CityService, private messageService: MessageService ) { }
ngOnChanges(changes: SimpleChanges): void {
this.cities = this.cities
}
ngOnInit() {
this.list();
this.states = this.state.states;
}
list(page:number = 0){
this.blockUI.start();
this.filter.state = this.selectedState.name;
this.pageable.page = page;
this.cityService.list(this.filter, this.pageable).pipe(finalize(() => this.blockUI.stop())).subscribe(data => {
this.totalRecords = data.totalElements;
this.cities = data.content;
}),
retry(3),
catchError(error => {
console.log('Could not retrieve the cities');
return of(0);
});
}
And lastly, my component.html
<div *blockUI="'list-cities'">
<p-table [value]="cities" #grid
[lazy]="true" [totalRecords]="records" (onLazyLoad)="onPageChange($event)"
[paginator]="true" [rows]="size" responsiveLayout="scroll">
<ng-template pTemplate="emptymessage">
<tr><td>No cities found</td></tr>
</ng-template>
<ng-template pTemplate="header">
<tr>
<th>Name</th>
<th>Population</th>
<th>State</th>
<th>Actions</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-city>
<tr>
<td>{{city.name}}</td>
<td>{{city.population | number}}</td>
<td>{{city.state}}</td>
<td class="actions">
<button pButton icon="pi pi-pencil" pTooltip="Edit" tooltipPosition="top" [routerLink]="['/cities', city.id]"></button>
<button pButton class="p-button-danger" icon="pi pi-trash" pTooltip="Delete" tooltipPosition="top"
(click)="delete(city)"></button>
</td>
</tr>
</ng-template>
</p-table>
</div>
error log:
ERROR Error: NG0900: Error trying to diff '[object Object]'. Only arrays and iterables are allowed
at DefaultIterableDiffer.diff (core.mjs:27502)
at NgForOf.ngDoCheck (common.mjs:3170)
at callHook (core.mjs:2552)
at callHooks (core.mjs:2511)
at executeCheckHooks (core.mjs:2443)
at refreshView (core.mjs:9493)
at refreshEmbeddedViews (core.mjs:10609)
at refreshView (core.mjs:9508)
at refreshComponent (core.mjs:10655)
at refreshChildComponents (core.mjs:9280)
Can someone provide some guidance?
UPDATE
I am considering implementing this code in the list() method:
list(page:number = 0){
this.blockUI.start();
this.filter.state = this.selectedState.name;
this.pageable.page = page;
this.cityService.list(this.filter, this.pageable).pipe(finalize(() => this.blockUI.stop())).subscribe(data => {
this.totalRecords = data.totalElements;
this.cities.push(data.content);
this.cities = this.cities[0];
console.log(this.cities)
})
but then i get the error
ERROR TypeError: Cannot read properties of undefined (reading 'push')
And my list becomes empty