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

Is Eval really as bad as they say... What alternative should I consider using instead?

The issue I'm facing with my webpack-build is the exclusive appearance of the "error" that

What is the best method for binding variables in Vue.JS using moustache syntax and passing parameters to them?

Utilizing the power of Koa.js in conjunction with MongoDb for seamless development

No reply received on the web browser

Issue encountered while generating Java Date using php

"Unlocking the power of AngularJS translate: A step-by-step

How can JQuery be utilized to extract the information stored in the "value" parameter of a chosen option?

Choosing Text with JavaScript

In Angular2, the derived class can inherit decorators

Angular 2 component: Harnessing the power of boolean inputs

I am encountering a JSON parsing error while trying to implement jQuery autocomplete, despite using a local array

The element 'stripe-pricing-table' is not a recognized property of the 'JSX.IntrinsicElements' type

What is the best way to send data from a header component to a separate container component?

Is there a way to switch out the ionic2-super-tabs Toolbar for the ion-slides pager feature?

Issue: The use of destructuring props is required by eslint, and I'm currently working with a combination of react and types

"Working with Node.js: Implementing a Static Variable in Module Ex

Struggling to make the paste event function in Typescript

Is there a way to simultaneously call two APIs and then immediately call a third one using RXJS?

Stop focusing on mat-select after a selection is made