Q:

Angular HttpClient-subscribe select property from data

I'm really sure about, that this question is answered multiple times in here. But I can't find them/don't knwo which terms to search for.
I've got a JSON-file looking like that:
{
  "pages": [{
      "displayname": "PageA",
      "url": "http://google.de",
      "icon": "iconZ"
    },

    {
      "displayname": "PageB",
      "url": "http://www.pageb.co.uk",
      "icon": "iconY"
    }
  ],
  "icons": [{
      "alias": "iconZ",
      "filename": "iconZ.svg"
    },

    {
      "alias": "iconY",
      "filename": "iconY.svg"
    }
  ]
}

Now I'm using the HttpClient (here called httpService) to get the data from the file.
this.httpService.get('./assets/pageconfig.json').subscribe(
      data => {
        this.arrAdress = data as string[];
      },
      (err: HttpErrorResponse) => {
        console.log(err.message);
      }
    );

I want to use the content of pages in my ngFor in the Frontend and I want to get an array of the icon-content for use in the Backend. How can I select/split the data by using the properties.
Thanks for your help
Elias

A:

Considering your pageconfig.json is used in both front and backend, and that you just need the "pages" attribute in your angular app, you may get it this way:
this.httpService.get('./assets/pageconfig.json').subscribe(
  data => {
    this.arrAdress = data.pages;
  },
  (err: HttpErrorResponse) => {
    console.log(err.message);
  }
);

You don't need to cast the data type.
You could also use the rxjs observable map chaining to parse your data and get only what interests you:
import { map } from 'rxjs/operators';

this.httpService.get('./assets/pageconfig.json')
  .pipe(map(data => data.pages))
  .subscribe(pages=> {
    this.arrAdress = pages;
  }.catch((err: HttpErrorResponse) => {
    console.log(err.message);
  });

I hope this is what you were looking for.

