How do I iterate through an array in an Angular component HTML?

I'm getting error NG0900 (Error trying to diff '[object Object]'. Only arrays and iterables are allowed) when attempting to iterate.

My class:

export class AppComponent {
  public share?: share[] = [];

  constructor(http: HttpClient) {
    http.post<share[]>('/api/member/shares/get', { "getSharesRequestDto": { "accountNumber": "x123" } }).subscribe(result => {
      this.share = result;
      console.log(this.share);
    }, error => console.error(error));
  }
}

interface share {
  id: string;
  description: string;
}

My HTML:

<div *ngIf="share">
  <div *ngFor="let s of share">
    <span>{{ s.id }}</span>
    <span>{{ s.description }}</span>
  </div>
</div>

The object that's logged to the console:

{
    "share": [
        {
            "id": "x00",
            "description": "desc 00"
        },
        {
            "id": "x01",
            "description": "desc 01"
        }
    ]
}

My API request object according to Swagger:

{
  "getSharesRequestDto": {
    "accountNumber": "string"
  }
}

My API response:

{
  "share": [
    {
      "id": "string",
      "description": "string"
    }
  ]
}

I'm new to Angular and don't understand the error message. It looks like I have an object containing an array, but the *ngFor should iterate through the array in the object.

I've tried mapping the object to an anonymous array, I've tried removing the type and changing to any[], but nothing seems to work.

Your API doesn't return the array, it return the object with contains a property share which have list. You can update api call like that:

constructor(http: HttpClient) {
    http.post<{ share: share[] }>('/api/member/shares/get', { "getSharesRequestDto": { "accountNumber": "x123" } }).subscribe(result => {
      this.share = result.share;
      console.log(this.share);
    }, error => console.error(error));
  }

api is returning data in object form and you are iterating over the object that's why you are getting error.

this.share = result;
console.log(this.share);

Tried to change the above code with this one

this.share = result.share;
console.log(this.share);

Based on the actual response from the API, you are just missing accessing the shared array as:

this.shared = result.shared;

I recommend handling the HTTP logic call to a service, also, you should go with the reactive approach when subscribing to the API result with the async pipe so you don't have to handle the subscription, additionally, instead of handling the HTTP call in the constructor, I suggest you do that in the OnInit lifecycle hook, it's where you usually handle all the code initialization:

Service

@Injectable({
  providedIn: 'root'
})
export class MyService {
  getShare(body: yourType): Observable<Share[]> {
    return http.post<Share[]>('/api/member/shares/get', body).pipe(
      map(response => response.share)
    );
  }
}

Component ts

@Component({...})
export class AppComponent implements OnInit {
  share$!: Observable<Share[]>;

  ngOnInit(): void {
    const body = { "getSharesRequestDto": { "accountNumber": "x123" } };
    this.share$ = this.getShare(body);
  }
}

Component template

<div *ngIf="share$ | async as shares">
  <div *ngFor="let share of shares">
    <span>{{ share.id }}</span>
    <span>{{ share.description }}</span>
  </div>
</div>

Keep the data types in upper case as well, so instead of share, it should be Share