How to iterate over an object instead of an array? in Angular

In Angular, ngFor is used to iterate over an array of items and render them dynamically in the template. However, what if you need to iterate over an object instead of an array? Fortunately, Angular provides a solution for this using pipes. In this tutorial, we will discuss how to iterate over an object in Angular using the keyvalue pipe.

Suppose we have a JSON object that contains a list of users with their information, and we need to display this information in our Angular application. We want to iterate over this object and display the user informaton in a table format in our template. How can we achieve this?

How to iterate over an object instead of an array?

Step 1 – Setting up the project
Step 2 – Create a dummy JSON object
Step 3 – Update the app component class
Step 4 – Update the app component template
Step 5 – Run the application

Step 1 – Setting up the project

Create a new Angular project by running the following command in your terminal:

ng new angular-iterate-object

Next, navigate to the project directory by running:

cd angular-iterate-object

Step 2 – Create a dummy JSON object

For this tutorial, we will create a dummy JSON object with user information. In your src directory, create a new file called users.json and add the following code:

{
   "1": {
      "name": "John Doe",
      "email": "johndoe@example.com",
      "phone": "123-456-7890"
   },
   "2": {
      "name": "Jane Smith",
      "email": "janesmith@example.com",
      "phone": "987-654-3210"
   },
   "3": {
      "name": "Bob Johnson",
      "email": "bobjohnson@example.com",
      "phone": "555-555-5555"
   }
}

This JSON object contains a list of users with their information. Each user is represented by an object with a unique ID.

Step 3 – Update the app component class

Open the app.component.ts file and import the HttpClient module by adding the following line at the top:

import { HttpClient } from '@angular/common/http';

Add the following code to the AppComponent class:

users: any[];

constructor(private http: HttpClient) { }

ngOnInit() {
   this.http.get<any>('assets/users.json').subscribe(data => {
      this.users = data;
   });
}

In the ngOnInit method, we are making an HTTP request to load the JSON file and storing the data in the users array.

Step 4 – Update the app component template

Open the app.component.html file and add the following code:

<table>
   <thead>
      <tr>
         <th>ID</th>
         <th>Name</th>
         <th>Email</th>
         <th>Phone</th>
      </tr>
   </thead>
   <tbody>
      <tr *ngFor="let user of users | keyvalue">
         <td>{{ user.key }}</td>
         <td>{{ user.value.name }}</td>
         <td>{{ user.value.email }}</td>
         <td>{{ user.value.phone }}</td>
      </tr>
   </tbody>
</table>

In the template, we are iterating over the users array using the keyvalue pipe. This pipe converts the object into an array of key-value pairs, which we can then iterate over using ngFor.

Inside the ngFor loop, we are accessing the key and value properties of each item. The key represents the user ID, while the value represents the user information object. We can then access the individual properties of the user information object using dot notation.

Step 5 – Run the application

Save all changes and run the application by running the following command in your terminal:

ng serve

Open your browser and navigate to http://localhost:4200. You should see a table with the user information loaded from the JSON file.

Conclusion

In this tutorial, we discussed how to iterate over an object in Angular using the keyvalue pipe. We also provided a sample problem and solution with step-by-step instructions to help you understand how to apply this technique in your Angular projects.

Category: Angular