Corner 4 An array is observed

Question

I need to get some data from an Observable object for use in SEO (change meta title && description).

I get data from the API via HTTP. Data is received in the Observable object.

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

Maybe I need to convert the 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 solve the following:

1. In radio.service.ts there is no need to return an array in the getRadioData (slug: string) function. The code for the right function should 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 should be without pipe (|). The code for the right section should be:

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

3. In the end, in radio-details.component.ts, I got a simple and readable object, for example {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 } ); }