# Angular: NG02200: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays

**Code:** `NG02200` · **Category:** Angular · **Seen on:** Angular, TypeScript

`*ngFor` (or `@for`) was given an object, `null` shape or a non-iterable instead of an array.

## Meaning

Typical when an API returns `{ data: [...] }` and the template loops over the wrapper object, or a service returns an Observable and you forgot `| async`. Loop over the array property, or convert an object with `keyvalue` / `Object.values`.

## Common causes

- API wraps the array in an object (`{ items: [...] }`) and the template loops the object
- Forgot `| async` on an Observable
- Property typed `any` that sometimes holds an object
- Looping over an object with `*ngFor` instead of the `keyvalue` pipe
- Paged responses (`results`, `data`) not unwrapped

## Quick fix

1. Bind to the array: `*ngFor="let i of resp.items"`
2. Use `| async` on Observables
3. Use `keyvalue` pipe to iterate object entries

## Detailed fix by platform

### Angular

1. `@for (kv of config | keyvalue; track kv.key) { {{ kv.key }}: {{ kv.value }} }`
2. Map responses in the service: `map(r => r.items)`

## Code examples

### Unwrap the response

```typescript
items$ = this.http.get<{ items: Item[] }>('/api/items').pipe(map(r => r.items));
// template: @for (i of items$ | async; track i.id) { ... }
```

## How to diagnose

1. **Shape** — Array or object in the response?
2. **Observable** — Missing async?
3. **Source** — Console.log the bound value

---
Source: [WhatIsMyError](https://whatismyerror.com/errors/angular/ng02200-ngfor-cannot-find-differ)