Question 108462 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Error NG0900 Error trying to diff '[object Object]'. Only arrays and iterables are allowed

with *ngFor i am able to render the data, but it throws this error

ERROR Error: NG0900: Error trying to diff ‘[object Object]’. Only arrays and iterables are allowed

Here is my service method

async getEditions(): Promise<Observable<Cigales>> {
    return this.http.get<Cigales>(url+"/candidates/editions", httpOptions).pipe(
      tap((getEditions: Cigales) => this.log('getEditions' + getEditions)),
      catchError(this.handleError<Cigales>('getEditions'))
    );
  }

Here is my component method

  editions: Cigale[] = [];

  async getEditions(): Promise<void> {
    await this.CigalesService.getEditions().then(res=> {
      res.subscribe(data => {
        this.editions = [];
        this.editions = data.content;
      })
    })
  }

Here is my Cigales interface

export interface Cigales {
  content: Array<Cigale>,
  pageable: pageable,
  last: string;
  totalPages: string;
  totalElements: string;
  size: string;
  number: string;
  sort: sort;
  first: string;
  numberOfElements: string;
  empty: string;
}

export interface Cigale {
  id?: string;
  eventName: string;
  eventStartDate: string;
  eventEndDate: string;
}

type sort = {
  empty: boolean,
  sorted: boolean,
  unsorted: boolean
}

type pageable = {
  sort: sort,
  offset: string;
  pageNumber: string;
  pageSize: string;
  paged: string;
  unpaged: string;
}

Here is my component.html

<tr *ngFor="let item of editions">
        <td>{{item.eventName}}</td>
        <td>{{item.eventStartDate}}</td>
        <td>{{item.eventEndDate}}</td>
        <td>
          <a class="d-inline" role="button" data-bs-toggle="modal" data-bs-target="#application-modal"><i class="bi bi-clipboard"></i></a>
          <a class="d-inline" role="button" data-bs-toggle="modal" data-bs-target="#application-modal"><i class="bi bi-pencil-square"></i></a>
        </td>
      </tr>

Console.log(this.editions) and i get an array of two objects

console result

EDIT : I’ve tried Array.isArray(this.editions) and it returns true

Tags:

2

Answers


  1. 0

    First of all the error you are facing is related to the fact that you are trying to use an object as the data source for *ngFor directive instead of an array.

    Secondly, try to assign data to this.editions like:

    async getEditions(): Promise<void> {
  await this.CigalesService.getEditions().then(res=> {
    res.subscribe(data => {
      this.editions= [...data.content];
    })
  })
}

    Also, I would advise you to avoid using Promises in your Angular applications and instead make your code more reactive by leveraging Subscriptions.

    Login or Signup to reply.
  2. 0

    try this:

    service method:

    getEditions(): Observable<any> {
  return this.http.get(url+"/candidates/editions", httpOptions).pipe(
     map(data => data.content)
);

    }

    component method:

    getEditions(): void {
  this.CigalesService.getEditions().subscribe(res => {
    this.editions = [...res];
});
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search