0

Buenas, alguien ha trabajado con la API de Spotify, estoy tratando en mostrar todos los albums de el artista pero me da un bad request,saben por qué? he revisado y no consigo dar con el 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>

1

1 respuesta 1

0

Por ejemplo para buscar artistas debe ser: https://api.spotify.com/v1/search?type=artist&q=

Tengo un ejemplo de cómo consigo artistas dependiendo de a quién esté buscando:

/// <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);
        // });
    }
}

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.