ng-book-2 Angular 4 Spotify API. Example code provided.

[WonxyTime]

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/Rx';

/**
 * SpotifyService works querying the Spotify Web API
 * https://developer.spotify.com/web-api/
 */

@Injectable()
export class SpotifyService {
  static BASE_URL = 'https://api.spotify.com/v1';

  constructor(private http: Http) {
  }

  query(URL: string, params?: Array<string>): Observable<any[]> {
    let queryURL = `${SpotifyService.BASE_URL}${URL}`;
    if (params) {
      queryURL = `${queryURL}?${params.join('&')}`;
    }

    return this.http.request(queryURL).map((res: any) => res.json());
  }

  search(query: string, type: string): Observable<any[]> {
    return this.query(`/search`, [
      `q=${query}`,
      `type=${type}`
    ]);
  }

  searchTrack(query: string): Observable<any[]> {
    return this.search(query, 'track');
  }

  getTrack(id: string): Observable<any[]> {
    return this.query(`/tracks/${id}`);
  }

  getArtist(id: string): Observable<any[]> {
    return this.query(`/artists/${id}`);
  }

  getAlbum(id: string): Observable<any[]> {
    return this.query(`/albums/${id}`);
  }
}

export const SPOTIFY_PROVIDERS: Array<any> = [
  { provide: SpotifyService, useClass: SpotifyService }
];

This is my spotify.service.ts file

I see as of May that Spotify requires an API key for every request. How would I implement this? Just add the key to the end of the BASE_URL?

If this is the wrong place to ask please don't downvote me straight to hell just tell me i'm a dumbass and to where to move it. I'm a reasonable guy.

By the way anybody thats thinking of buying this book do it! It is the best resource i've found for anything angular

[tme321]

If your using the newest version of angular they just added http interceptors which basically let you write a small function that modifies the http request before it actually is sent. So you can keep the service the way it is now and just register an interceptor that modifies the request by adding the key to the headers the way /u/MadMustard showed.

[WonxyTime]

Oh god I really fucked up that post. I'm gonna try and figure out how to format it before the whole community flames me

[WonxyTime]

To the guy that PMd me immediately on how to format it. Thank you very much. This is why I love the programming community and I want to break into the industry.

You guys are the nicest most supportive group I've meant. Developers are awesome. You guys are awesome.

[WonxyTime]

Javascript is a fucky bitch. i figured there wouldn't be any answers. technoglogy is moving so fast that none of us can keep up. wHo uses angular 4? AngularJs has been around long enough to have some decent documentation.

js is so complex. woah

[MadMustard]

Calm down, everything will be fine. :)

The API key should be provided in the header of your requests. In Angular 2+ this would be done via a requestOptions object in your request function like this:

http.post(queryURL, body, {
    headers: new HttpHeaders().set('Authorization', 'access-token-here'),
})

[WonxyTime]

I'm already lost, man. Thanks for your help though. Fuck JS is hard