Angular observables and how to iterate through an array of object to collect fields into an array

Question

I am trying to iterate through my array of objects and add specific fields in to their own array for which I can possibly use for list boxes and other front end stuff.

I am trying to iterate through this object and put objects 'appSupportedId' into its own array for instance I would want it to look like

array of appsSupported = [5,6,15,etc]

I am trying to do this with my http get service and using RXJS observables to do so. Any suggestions would be appreciated on how to get this to happen, thanks.

JSON Object

    [
{
    "applicationUserSubscriptionUniqueId": 18639,
    "createdByName": "2222",
    "updatedDate": "2019-12-02T19:17:45.000+0000",
    "applicationsSupported": {
        "appSupportedId": 5,
        "supportAreaId": 123,
        "supportAreas": {
            "applicationId": 123,
        },
        "appSupportedName": "app1"
    },
    "userSubscriptionInformation": {
        "userSubscribedUniqueId": 18638,
    },
    "reportSubscriptionId": 18638,

 },
 {
    "applicationUserSubscriptionUniqueId": 18638,
    "createdByName": "2222",
    "updatedDate": "2019-12-02T19:17:45.000+0000",
    "applicationsSupported": {
        "appSupportedId": 6,
        "supportAreaId": 123,
        "supportAreas": {
            "applicationId": 123,
        },
        "appSupportedName": "app2"
    },
    "userSubscriptionInformation": {
        "userSubscribedUniqueId": 18638,
    },
    "reportSubscriptionId": 18638,

},
{
    "applicationUserSubscriptionUniqueId": 18637,
    "createdByName": "2222",
    "updatedDate": "2019-12-02T19:17:45.000+0000",
    "applicationsSupported": {
        "appSupportedId": 15,
        "supportAreaId": 123,
        "supportAreas": {
            "applicationId": 123,
        },
        "appSupportedName": "app3"
    },
    "userSubscriptionInformation": {
        "userSubscribedUniqueId": 18638,
    },
    "reportSubscriptionId": 18638,

},
]

Adrita Sharma · Accepted Answer · 2019-12-09 18:21:05Z

1

Try it using flatMap:

appsSupported = [];

constructor() {
  this.appsSupported = (this.data.flatMap(x => x.applicationsSupported)).map(y=> y.appSupportedId)
}

Working Demo

answered Dec 9, 2019 at 18:21

Adrita Sharma

22.3k11 gold badges75 silver badges85 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Rob DePietro Over a year ago

but this object is coming from a HTTP GET service which is coming through as an Observable and I cannot just assign it to an array like the demo suggests

Adrita Sharma Over a year ago

Why not? After subscribe, add, this.data = resp;and then add this code I shared

Rob DePietro Over a year ago

excuse my ignorance....i may need more guidence...like this? this.appUserSubService.getSpecificUser(this.userId) .subscribe(info => this.appsSupported = (info.flatMap(x => x.applicationsSupported)).map(y=> y.appSupportedId) ) console.log(this.appsSupported)

MoxxiManagarm · Accepted Answer · 2019-12-09 20:43:39Z

1

Just use rxjs map with array with

const supportedAppIds$ = this.http.get<YourType[]>(YOURPATH).pipe(
    map((data: YourType[]) => data.map(entry => entry.applicationsSupported.appSupportedId))
);

answered Dec 9, 2019 at 20:43

MoxxiManagarm

9,2314 gold badges20 silver badges51 bronze badges

Comments

Celsiuss · Accepted Answer · 2019-12-09 18:16:37Z

0

Use the rxjs map operator, see my example.

const supportedApps$ = this.http.get('http://example.com').pipe(
    map((el: MyAppData) => el.applicationsSupported.appSupportedId)
);

Then subscribe to supportedApps$, for example in your template.

answered Dec 9, 2019 at 18:16

Celsiuss

9057 silver badges19 bronze badges

Collectives™ on Stack Overflow

Angular observables and how to iterate through an array of object to collect fields into an array

3 Answers 3

3 Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Related