Spotify Api Results Ajax

Question

イメージには、最初の要素（曲、イメージ、アーティストなど...）のみを表示するコードがあります。私はそれが私を見るようにする方法を知っていただきたいと思い ：

• ユーザーがそのボタンをクリックすると、すべてのトラック 結果と新しいモーダルを表示するには、以前行っ検索します。
• ユーザーがトラック名の1つをクリックすると、そのトラックの情報（そのオーディオを含む）を に更新します。

ボタンはすでに作成されています。

$('#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

あなたがイベントをトリガするボタンを持っているようなので、それはそう...ここでは、あなたの次のステップです：

1. は、（例えば、テキストフィールドを介して）入力を取り、を通してそれを検索しますAPI。
2. 次に、APIから解析されたJSONを取得します。
3. 次に、あなたがあなたのData_Songs機能で何をしているかを行うことができるでしょう...

は、ここに私の実装です：私は$.get()方法に成功ハンドラを使用

$('#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); 
    }) 
}) 

注意これはあなたのコードとは少し異なります。

、$のに.get（）関数の中で

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