title: Store persistent data on Services ( Angular 2 )
body: <p>First of all i would like to share the next info:<br>
  I have two services, one that gets the http request and another that store data. I tried a lot of ways but i can't get it. I wanna store data on the second service to get the data from differents components and dont DRY (on every component). </p>
  
  <p><strong>The specific problem:</strong> I get the http request from the API, then i want to store the json response (store on array or object) to get persistent data and get the info on every component. I will share what i tried, but it didnt work on the second service (artist.service.ts).</p>
  
  <pre><code>// spotify.service.ts
  
  import { Injectable } from '@angular/core';
  
  import { HttpClient, HttpHeaders } from '@angular/common/http';
  import 'rxjs/add/operator/map';
  
  @Injectable()
  export class SpotifyService {
  
  
    urlSpotify: string = 'https://api.spotify.com/v1/';
    token: string = 'BQDejsMxhS-8621YfIhK_X6uxZcFY4LIBTNNxVIDAPimiBBU5t7lQlQCUboZkt5JBypYq-IH4dv9bhxQgaU';
  
  
    constructor(public http: HttpClient) {
          console.log('SpotyApp Ready');
     }
  
     private getHeaders(): HttpHeaders {
       let headers = new HttpHeaders({
          'authorization': `Bearer ${ this.token }`
        });
  
       return headers;
     } 
  
  
  
  getArtista( id: string ) {
         let url = `${ this.urlSpotify }artists/${ id }`;
  
        let headers = this.getHeaders();
  
        return this.http.get(url, { headers});
     }
  
     // Methods
  </code></pre>
  
  <hr>
  
  <pre><code>// artist.service.ts
  
  import { Injectable } from '@angular/core';
  import { SpotifyService } from './spotify.service';
  import { ActivatedRoute } from '@angular/router';
  import { Observable } from 'rxjs';
  
  
  @Injectable()
  export class ArtistService {
  
  artist: any = {};
  
  constructor(private _spotify: SpotifyService, public route: ActivatedRoute) {}
  
   // It doesnt work....
   getArtista(id): Observable&lt;any&gt; {
      if (this.artist) {
          return Observable.of(this.artist);
      }
      return this._spotify.getArtista(id).do(artist =&gt; {
          console.log(artist, 'Artista');
          this.artist = artist;
      });
   }
  
  
    // It doesnt work...It works only on EVERY component.
  
  getArtista(): void{
  this.route.params.map(params =&gt; params['id'])
    .subscribe(id =&gt; {
      this._spotify.getArtista(id)
        .subscribe(artist =&gt; {
          console.log(artist, 'Artista');
              this.artist = artist;
        });
  </code></pre>
  
  <hr>
  
  <pre><code>// artist.component.ts
  
  import { Component, OnInit } from '@angular/core';
  import { ArtistService } from '../../services/artist.service';
  
  @Component({
    selector: 'app-artist',
    templateUrl: './artist.component.html'
  })
  export class ArtistComponent implements OnInit {
  
    artist: any = {};
  
  
    constructor(public _artist: ArtistService) {}
  
    ngOnInit() {
      this.artist = this._artist.getArtista();
    }
  }
  </code></pre>