Angular observable, how to iterate through an object with nested array to collect fields into an array

Question

I am trying to go through my JSON object and add specific fields to their own array.

I am trying to iterate through the below object and store the 'appSupportedId' in its own array.

I am getting an ERROR

ERROR

 core.js:15714 ERROR TypeError: info.flatMap is not a function

I have implemented something similar in my code but the only difference with the backend json object is that this below object has a nested array

Any help would be appreciated!

component.ts

userAppDetails:[];

this.incidentService.get(this.id)
  .subscribe((info) => 
    this.userAppDetails = (info.flatMap(x => x.applicationsSupported)).contactAll().map(y=> y.appSupportedId))

JSON OBJECT

 "incidentNumber": 18817,
 "Email": null,
 "applicationsSupported": [
    {
        "appSupportedId": 18569,           
        "supportAreaId": 122,
        "supportAreas": {
            "applicationId": 122,               
            "activeFlag": "Y",
        },
        "appSupportedName": "app 1"
    },
    {
        "appSupportedId": 18592,          
        "supportAreaId": 123,
        "supportAreas": {
            "applicationId": 123,
            "activeFlag": "Y",
        },
        "appSupportedName": "app 2"
    },
    {
        "appSupportedId": 18655,
        "supportAreaId": 122,
        "supportAreas": {
            "applicationId": 122,
            "activeFlag": "Y",
        },
        "appSupportedName": "app 3"
    }
],
"createdDate": "2020-01-17T18:02:51.000+0000",

It looks like `info` is an object, not an array. I don't understand what do you want. You need to create an array and fill it with each `appSupportedId` values ? — Emilien, Jan 20 '20 at 16:17
You mean something like https://stackblitz.com/edit/rxjs-d9nchy ? You seem to be mixing up observable pipe operators (within a pipe before subscribe) with object operators (within subscribe) — Andrew Allen, Jan 20 '20 at 16:25
@AndrewAllen I think this is the good answer. Maybe you can write it as an answer. — Emilien, Jan 20 '20 at 16:42
@Emilien thought I'd try and clarify first but answer posted :) — Andrew Allen, Jan 20 '20 at 16:54

score 2 · Accepted Answer · answered Jan 20 '20 at 16:53

You seem to be mixing up observable pipe operators (within a pipe before subscribe) with object operators (within subscribe).

RxJS pipeable operators work within an observable stream and they are very powerful. You can put a bunch of operators together before you even subscribe. You can sometimes acheive a similar result within the subscribe though this often leads to messy code.

flatMap

concatAll

The following (https://stackblitz.com/edit/rxjs-d9nchy) is an example using the map RxJS operator. note this is different from the array map operator:

import { of } from 'rxjs'; 
import { map } from 'rxjs/operators';

const DATA = {
  "incidentNumber": 18817,
  "Email": null,
  "applicationsSupported": [
      {
          "appSupportedId": 18569,           
          "supportAreaId": 122,
          "supportAreas": {
              "applicationId": 122,               
              "activeFlag": "Y",
          },
          "appSupportedName": "app 1"
      },
      {
          "appSupportedId": 18592,          
          "supportAreaId": 123,
          "supportAreas": {
              "applicationId": 123,
              "activeFlag": "Y",
          },
          "appSupportedName": "app 2"
      },
      {
          "appSupportedId": 18655,
          "supportAreaId": 122,
          "supportAreas": {
              "applicationId": 122,
              "activeFlag": "Y",
          },
          "appSupportedName": "app 3"
      }
  ],
  "createdDate": "2020-01-17T18:02:51.000+0000",
}
const source = of(DATA).pipe(
  map(x => x.applicationsSupported),
  map(arr => arr.map(entry => entry.appSupportedId))
);

source.subscribe(x => console.log(x));

Angular observable, how to iterate through an object with nested array to collect fields into an array

1 Answers1