Angular4 Observable to Array

Question

I need to fetch some data from Observable object for using in SEO (change meta title && description).

I get data from API via HTTP. Data got in Observable object.

I succeed somehow to convert Observable object by subscribing to this.radio$, but this causes double request of function getRadioData(slug: string).

Probably I need to convert Observable object to Array.

radio-details.component.ts (HERE I WANT TO get meta_title && meta_description variables for SEO)

 import { Component, OnInit } from '@angular/core'; import { RadioDetails, RadioService } from './../services/radio.service'; import { Router, ActivatedRoute, ParamMap } from '@angular/router'; import { Observable } from 'rxjs/Observable'; @Component({ selector: 'app-radio-details', templateUrl: './radio-details.component.html', styleUrls: ['./radio-details.component.css'], providers: [RadioService] }) export class RadioDetailsComponent implements OnInit { radio$: Observable<RadioDetails[]>; constructor( private route: ActivatedRoute, private router: Router, private service: RadioService ) { } ngOnInit() { this.route.paramMap .switchMap((params: ParamMap) => this.service.getRadioData(params.get('slug')) ) .subscribe( (data) => { this.radio$ = data; console.log("this.radio$ IS: ", this.radio$) // HERE I WANT TO get meta_title && meta_description variables for SEO // this.radio$ looks like: Object { _isScalar: false, source: Object, operator: Object } } ); } } 

radio.service.ts

 import { Injectable } from '@angular/core'; import { Http } from '@angular/http'; import 'rxjs/add/operator/map'; export class Categories{ constructor( public title: string, public items: Radio[] ){} } export class Radio{ constructor( public title: string, public slug: string, public external_url?: string, public isplay?: string, public css_class?: string ){} } export class RadioDetails{ constructor( public title: string, public player_type?: string, public stream?: string, public meta_title?: string, public meta_description?: string ){} } @Injectable() export class RadioService { constructor(private _http: Http) { } getAllRadiosData(){ return this._http.get('http://api.2net.co.il/radio/stations/all_stations.php') .map(res => res.json()) } getRadioData(slug: string){ if (slug !== null && typeof slug !== 'undefined' && slug){ return [ this._http.get('http://api.2net.co.il/radio/stations/station.php?slug='+slug) .map(res => res.json()) ]; } } } 

radio-details.component.html

 <article class="page page-radio-detail"> <div *ngIf="radio$ | async as radio; else noRadioFound"> <div class="playerZone"> <header class="entry-header"> <h1 class="entry-title"> <span class="text"> Playing now: </span> <span class="radio_title">{{ radio.title }}</span> </h1> </header> <div class="player-wrapper"> <app-radio-player stream="{{radio.stream}}" player_type="{{radio.player_type}}"></app-radio-player> </div> </div> </div><!-- /ngIf --> <ng-template #noRadioFound> <div class="playerZone noRadioFound"> <header class="entry-header"> <h1 class="entry-title"> <span class="text"> Select radio station: </span> </h1> </header> <div class="player-wrapper"> click on links below: </div> </div> </ng-template> <div class="entry-content"> <app-radio-categories></app-radio-categories> </div> </article> 

Answer 1

After you guys helped me the solution is:

1. In radio.service.ts no need return Array in the function getRadioData(slug: string) . The right function code must be:

 getRadioData(slug: string){ if (slug !== null && typeof slug !== 'undefined' && slug){ return this._http.get('http://api.2net.co.il/radio/stations/station.php?slug='+slug) .map(res => res.json()); } } 

2. The implementation of radio$ in radio-details.component.html must be without pipe (|). Right section code must be:

 <div *ngIf="radio$ as radio; else noRadioFound"> ... </div> 

3. After all in radio-details.component.ts I got simple and readable Object like {mate_description: "some meta description", meta_title: "some_meta_title", stream: "http://example.com"}

 ngOnInit() { this.route.paramMap .switchMap((params: ParamMap) => this.service.getRadioData(params.get('slug')) ) .subscribe( (data) => { this.radio$ = data; console.log("this.radio$ IS: ", this.radio$) // this.radio$ - is a readable Object } ); }