Spotify Api Ergebnisse Ajax

Question

In dem Bild habe ich den Code nur das erste Element (Lied, Bild, Künstler, etc ...) anzuzeigen. Ich mag würde wissen, wie es mir zeigen zu machen:

• Wenn ein Benutzer klickt auf diese Schaltfläche, eine neue modale zeigen mit alle Ergebnisse der Spuren suchen, die Sie zuvor durchgeführt.
• Wenn ein Benutzer auf einen der Titelnamen klickt, aktualisieren Sie den Player mit die Informationen dieses Titels, einschließlich der Audioinformationen.

Die Schaltfläche ist bereits erstellt.

$('#song_btn').on('click', function Search_Song (event) { 
event.preventDefault(); 
var song = $('#song_input').val(); 
var request = $.get('https://api.spotify.com/v1/search?q=' + song +'&type=track'); 
function Data_Songs (song) { 
    var track = song.tracks.items[0]; 
    $('.song_title').text(track.name); 
    $('.artist_name').text(track.artists[0].name);    
    var cover = '<img src="' + track.album.images[0].url + '">'; 
    $('.cover_image').html(cover); 
    var audio = '<audio class="js-player" src="' + track.preview_url + '">'; 
    $('.audio').html(audio); 
    var more_results = '<br/><button type="submit" class="btn btn-primary" id="more_btn">Ver más Resultados</button>'; 
    $('.more_result').html(more_results); 
}; 
    function handle_Error() { 
    console.error('¡¡ Ha Fallado !!'); 
    } 
    request.done(Data_Songs); 
    request.fail(handle_Error); 
}); 

Answer 1

So scheint es, wie Sie Taste haben das Ereignis auszulösen ... Hier Ihre nächsten Schritte sind:

1. einen Eingang nehmen (durch ein Textfeld zum Beispiel) und für sie durch die Suche API.
2. Als nächstes erhalten Sie den geparsten JSON von der API.
3. Dann werden Sie in der Lage sein zu tun, was Sie in Ihrer Funktion Data_Songs tun ...

Hier ist meine Implementierung:

$('#song_btn').on('click', function(){ 
    var BASE_URL = 'https://api.spotify.com/v1/' 
    var QUERY = $('#search_field').val(); // This is the value of your text field 

    var spotify_json = $.get(BASE_URL + 'search?type=track&query=' + QUERY, function(data){ 
     console.log(data.tracks); // Do whatever you want with them after here! 
     // Ex. alert(data.tracks[0].href); 
    }) 
}) 

Bitte beachte, dass ich auf der $.get() Methode einen Erfolg Handler verwendet , was ein bisschen anders ist als dein Code.

Um Ihre Data_Songs Funktion in der $ .get() Funktion zu verwenden,

var spotify_json = $.get(BASE_URL + 'search?type=track&query=' + QUERY, Data_Songs(data));