How To Iterate Multi-Dimensional Array with *ngFor

Question

How to iterate Below Url Array.

https://jsonplaceholder.typicode.com/users

Answer 1

What is exactly multi-dimensional here? Anyway, you can use *ngFor to do that without any problem. Just an example; Let's say you have a persons array in your TS file, and every person can have multiple roles.

  <div *ngFor="let person of persons">
    <div *ngFor="let role of person.roles">
      {{role}}
    </div>
  </div>

Just make sure you include CommonModule in your AppModule:

import { CommonModule } from "@angular/common";

EDIT: Your array is not multidimensional. You can access nested properties with only one *ngFor :

    <div *ngFor="let person of persons">
      {{person.company.name}}
    </div>

Answer 2

The provided array is not a multidimensional array. It is just an array with objects. You can use *ngFor in normal way.

*ngFor="let user of users"

And you can access each user object and its properties

{{user. name}}

And also inner properties like this

{{user.address.street}}

Answer 3

Fist I want to suggest you go through https://stackoverflow.com/help/how-to-ask

And the answer to your question is :

TS Component

public objects: Array<any> = [your_array];

HTML Component

<div *ngFor="let obj of objects">
    <div> {{ obj.id }}</div>
    <div> {{ obj.name }}</div>
</div>