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.
Leave a Reply