CODEWITHSUNDEEP
angularrxjsobservable
Rob DePietro
Rob DePietro

Reputation: 324

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

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,

},
]

Upvotes: 2

Views: 1130

Answers (3)

MoxxiManagarm
MoxxiManagarm

Reputation: 9134

Just use rxjs map with array with

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

Upvotes: 1

Adrita Sharma
Adrita Sharma

Reputation: 22203

Try it using flatMap:

appsSupported = [];

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

Working Demo

Upvotes: 1

Celsiuss
Celsiuss

Reputation: 905

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.

Upvotes: 0

Related Questions