Problems with angular2 and api of spotify

Question

Problems with angular2 and api of spotify

Navigation

#1 by (0 votes)

0

Hi, someone has worked with the API Spotify , I'm trying to show all the albums of the artist but he gives me a bad request , do you know why? I have reviewed and I can not find the error.

-------------- SpotifyService.ts ----------

import {Injectable} from '@ angular / core';

import {Http, Headers} from '@ angular / http';

import 'rxjs / add / operator / map';

@Injectable ()

export class SpotifyService {

private searchUrl: string;
private artistUrl: string;
private albumsUrl: string;

constructor(private _http:Http){

}

searchMusic(str:string, type='artist'){
    this.searchUrl = 'https://api.spotify.com/v1/search?query='+str+'&offset=0&limit=20&type='+type+'&market=US';
    return this._http.get(this.searchUrl)
        .map(res => res.json());
}

getArtist(id:string){
    this.artistUrl = 'https://api.spotify.com/v1/artists/'+id;
    return this._http.get(this.artistUrl)
        .map(res => res.json());
}

getAlbums(artistId:string){
    this.albumsUrl = 'https://api.spotify.com/v1/artists/'+artistId+'/albums';
    return this._http.get(this.albumsUrl)
        .map(res => res.json());
}

}

--------- artist.component.ts ------

import {Component, OnInit} from '@ angular / core';

import {SpotifyService} from '../services/ spotify.service';

import {Artist} from '../../../ artist';

import {Album} from '../../../ album';

import {ActivatedRoute} from '@ angular / router';

@Component ({

moduleId:module.id,
selector: 'artist',
templateUrl: 'artist.component.html',

})

export class ArtistComponent implements OnInit {

id:string;

artist: Artist[];

albums:Album[];

constructor(
    private _spotifyService:SpotifyService,
    private _route:ActivatedRoute){

}

ngOnInit(){

    this._route.params
        .map(params => params['id'])
        .subscribe((id) => {
            this._spotifyService.getArtist(id)
                .subscribe(artist => {
                    this.artist = artist;
                })

            this._spotifyService.getAlbums(id)
                .subscribe(albums => {
                    this.albums = albums.items;
                })
        })
}

}

---------- artist.component.html -----------

<div class="row">

  <div *ngFor=" let album of albums">

    <h3> {{album.name}} </h3>

  </div>

</div>

angularjs-2.0 api

asked by Vjotaa 07.02.2017 в 22:02

source

1 answer

Insert a record in 2 related tables Parallax & Slider materialize.css

score 0 · Answer 1

For example to search for artists you should be: link

I have an example of how I get artists depending on who I'm looking for:

/// <reference path="../typings/tsd.d.ts" />

import { Component } from 'angular2/core';
import { Observable } from 'rxjs/Rx';

@Component({
    selector: 'my-app',
    template: '
        <input id="search" type="text" class="form-control">
    '
})
export class AppComponent {
    constructor() {

        var keyups = Observable.fromEvent($('#search'), 'keyup')
            // Get just I need
            .map(e => e.target.value)
            // Just send the observable if is typing a word greater than 3 characters
            .filter(text => text.length >= 3)
            // Time to wait, becuase we don't want to send a lot of requests to spotify API
            .debounceTime(400)
            // Send the request only if the user is sending a different word
            .distinctUntilChanged()
            // Avoid problems becuase it's an observable inside an observable
            .flatMap(searchTerm => {
                // url to get the artists
                var url = 'https://api.spotify.com/v1/search?type=artist&q=' + searchTerm;
                var promise = $.getJSON(url);
                return Observable.fromPromise(promise);
            });

        var subscription = keyups.subscribe(data => console.log(data));
        // If the user wants to stop sending requests
        subscription.unsubscribe();

        // var debounced = _.debounce(function(text){
        //     var url = 'https://api.spotify.com/v1/search?type=artist&q=' + text;
        //     $.getJSON(url, function(artists) {
        //         console.log(artists);
        //     });
        // }, 400);

        // $('#search').keyup(function(e) {
        //     var text = e.target.value;

        //     if (text.length < 3) {
        //         return;
        //     }

        //     debounced(text);
        // });
    }
}