iterating over a nested map within a map in an Angular application

Question

iterating over a nested map within a map in an Angular application

I wrote a Java service that returns an observable map> and I'm currently struggling to iterate through the outer map using foreach loop.

[...]
.then(
    (response: Package) => {
         response.activityMap.forEach((key: string, value: Map<string, number>) => {
             //perform some actions
         });
    }
)
[...]

The Package type has the following parameters:

export interface Package{ 
    diagnostic?: Diagnostic;
    activityMap?: { [key: string]: { [key: string]: number; }; };
}

My goal is to use forEach to loop through the "father" map and perform actions for each key.//dosomething

But I'm encountering an error when trying to use forEach:

This expression is not callable. Type '{ [key: string]: number; }' has no call signatures.

javascript java angular typescript

Answer 1

Answer №1

When working with observables, the first step is to subscribe to the observable in order to iterate through the returned values.

There are two different approaches for handling subscriptions:

Approach 1

Handling Subscription Inside Component

this.myService.getPackage().subscribe((response: Package) => { 
    response.activityMap.forEach((key: string, value: Map<string, number>) => {
             //do something
         });
})

It's important to remember to unsubscribe to prevent memory leaks in your application. You can achieve this using the TakeUntil RxJS operator here.

OR

Approach 2

Using Async Pipe

Rather than subscribing directly, you can benefit from using async pipes as a best practice. More information can be found here.

Tip

To enhance readability and maintainability, consider utilizing the RxJS Map Operator within a pipe. Check out more details about this operator here.

Answer 2

When working with observables, the first step is to subscribe to the observable in order to iterate through the returned values.

There are two different approaches for handling subscriptions:

Approach 1

Handling Subscription Inside Component

this.myService.getPackage().subscribe((response: Package) => { 
    response.activityMap.forEach((key: string, value: Map<string, number>) => {
             //do something
         });
})

It's important to remember to unsubscribe to prevent memory leaks in your application. You can achieve this using the TakeUntil RxJS operator here.

OR

Approach 2

Using Async Pipe

Rather than subscribing directly, you can benefit from using async pipes as a best practice. More information can be found here.

Tip

To enhance readability and maintainability, consider utilizing the RxJS Map Operator within a pipe. Check out more details about this operator here.

iterating over a nested map within a map in an Angular application

Answer №1

Approach 1

Handling Subscription Inside Component

Approach 2

Using Async Pipe

Tip

Similar questions

Creating a video that plays frame-by-frame on an HTML5 canvas and can be controlled with a slider

Having trouble importing a package into my React boilerplate

Tips on avoiding updates to a defined object when a new object is filtered (created from the original object)

Fixing prop passing issues in Vue.js components to prevent errors

Prevent the countdown timer from resetting every time I refresh the page

What is the method for inserting a line break into a string that is being transferred to a component in Next JS?

An error was thrown: Unexpected token ILLEGAL was detected

Updating controller variables when the route changes in AngularJS

What can be used instead of makeStyles in Material UI version 5?

Using npm webpack-mix to execute a JavaScript function stored in a separate file

Modify the data type of an object member based on its original type

Guide to choosing a table entry based on a specific table component with the help of Selenium WebDriver

Retrieve the value of a dynamically added or removed input field in JQuery using Javascript

Adding a third-party script after closing the body tag on specific pages in NextJS can be achieved by using dynamic imports and

Understanding how to translate the content of email confirmation and password reset pages in Parse Server

The dropdown menu button stubbornly remains open and refuses to close

submit a new entry to add a record to the database

What are the steps to employ a query string to display a specific image?

Error thrown: Unhandled Promise Rejection - The name 'ngForm' could not be exported

Body not being checked for overloads