Angular displaying Observable Array

Question

I have an API (Node.js) and an Angular frontend.

Now I want to loop through the data and display it. Therefore I perform an HTTP Request to the backend and get back an Observable which i then want to display on the screen.

The code to display:

<ng-container *ngFor="let p of plans$ | async">
    <a [routerLink]="['/plan', p.id]">

        <div class="plan" style="margin-bottom: 10px;">
            <div class="row">
                <div class="col-md-2">
                    <img [src]="p.image" style="margin: 5px;"/>
                </div>
                <div class="col-md-10" style="padding-top: 5px;">
                    <div class="title">{{ p.name }}</div>
                    <div class="description">{{ p.description }}</div>
                    <div class="description">Übungen: {{ p.exercises }}</div>
                </div>
            </div>
        </div>
    </a>
</ng-container>

The corresponding service:

  fetchAll(): Observable<Plan[]> {
    return this.http
      .get<Plan[]>(this.url, { responseType: "json" })
      .pipe(
        catchError(this.errorHandlerService.handleError<Plan[]>("fetchAll"))
      );
  }

But somehow I get the following error:

ERROR RuntimeError: NG02200: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables, such as Arrays. Did you mean to use the keyvalue pipe? Find more at

What am I missing?

Edit:

{
"plans": [
    {
        "id": 1,
        "name": "Plan 1",
        "description": "Super lange Text",
        "image": "assets/workout_15620186.png",
        "exercises": 11
    },
    {
        "id": 2,
        "name": "Plan 2",
        "description": "Super lange Text",
        "image": "assets/workout_15620186.png",
        "exercises": 1
    },
    {
        "id": 3,
        "name": "Plan 3",
        "description": "Super lange Text",
        "image": "assets/workout_15620186.png",
        "exercises": 1
    }
]
}

How is plans$ populated? Apparently it isn't holding an array, though, so double check your data. Make sure the array you want isn't nested inside of some other response object. — Carcigenicate
– Carcigenicate, Commented Jun 18 at 19:10
this.planService.fetchAll(); from what i understand it is an Observable Array so it should work, but somehow it doesnt — donbolli
– donbolli, Commented Jun 19 at 4:41
@donbolli kindly share the API response that you get from the network tab — Naren Murali
– Naren Murali, Commented Jun 19 at 4:53

Naren Murali · Accepted Answer · 2025-06-19 05:36:38Z

0

You have to access the plans array inside the API response.

When you try to pass in an object to ngFor we will get this error, because it expects an array to iterate, looking at your API response, we have to access the property plans which contains the array that you want to iterate.

Use map of rxjs to access the inner plans array.

fetchAll(): Observable<Plan[]> {
    return this.http
      .get<Plan[]>(this.url, { responseType: "json" })
      .pipe(
        map((data:any) => data.plans),
        catchError(this.errorHandlerService.handleError<Plan[]>("fetchAll"))
      );
  }

OR

Access the array form the html.

HTML

<ng-container *ngFor="let p of (plans$ | async).plans">
    <a [routerLink]="['/plan', p.id]">
        <div class="plan" style="margin-bottom: 10px;">
            <div class="row">
                <div class="col-md-2">
                    <img [src]="p.image" style="margin: 5px;"/>
                </div>
                <div class="col-md-10" style="padding-top: 5px;">
                    <div class="title">{{ p.name }}</div>
                    <div class="description">{{ p.description }}</div>
                    <div class="description">Übungen: {{ p.exercises }}</div>
                </div>
            </div>
        </div>
    </a>
</ng-container>

edited Jun 19 at 5:36

answered Jun 19 at 5:28

Naren Murali

66.1k6 gold badges51 silver badges96 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

donbolli Jun 19 at 5:45

map works, html doesnt

Collectives™ on Stack Overflow

Angular displaying Observable Array

1 Answer 1

OR

HTML

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

OR

HTML

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related