Bir işlev çalıştırmak için async.times tamamlanıncaya kadar bekleyeceğim bir olay dinleyicisi nasıl seçilir

Question

Bir web uygulaması oluşturmak için bir node.js sunucusu, Spotify API'si ve spotify-web-api-js düğüm modülünü kullanıyorum. Kullanıcı bir sanatçının adını girebilir, ilgili sanatçıların şarkılarının listesine bakabilir ve daha sonra bu oynatma listesini kendi Spotify hesabına kaydedebilir. Ancak, hala son adımda sorun yaşıyorum.

Benim kullanıcı yetkilendirme akışı ilk oluyor: şarkıların gerçek ayrıntıları API tarafından toplanan nerede bunun altında

if (params.access_token) { 

    s.setAccessToken(params.access_token); 

    s.getMe().then(function(data) { 

     console.log(data); 
     console.log(data.id); 
     user_id = data.id; 

olduğunu. Aşağı doğru olsa da, önce gerçekleşir ve kullanıcı yetkilendirmesi yalnızca kullanıcı o sayfada ikinci bir düğmeyi tıklarsa gerçekleşir. async.times kullanarak, bir diziye içeriğini iterek

Şu anda, hat 114 üzerinde ben var song_uris.push(relatedArtists[n].uri); (Ben kendi sunucusunda browserify kullandıkları için bu işe yaramayabilir ama JSBin of full code here,)

async.times(counter, function(n, next){ 
     s.getArtistTopTracks(relatedArtists[n].id, "US", function (err, data2) { 
      relatedArtists[n].song = data2.tracks[0].name; 
      relatedArtists[n].uri = data2.tracks[0].uri; 
      console.log(relatedArtists[n].uri); 
      // make sure to put the access token here add song to playlist 
      // create array 
      song_uris.push(relatedArtists[n].uri); 
      console.log(song_uris); 

      // song_uris = relatedArtists[n].uri; 
      // 
      // console.log(song_uris); 

      next(null); 

     $("#playlist").load(function() { 
      s.addTracksToPlaylist(user_id, playlist_id, song_uris); 
      }); 
     }); 


     }, function(err) { 
     // console.table(relatedArtists); 

     for (k = 0; k < 20; k++) 
     { 
      $('#related-artist').append('<p><strong>' + relatedArtists[k].name + '</strong> -- \"' + relatedArtists[k].song + '\"</p>'); 


     } 

. böylece addTracksToPlaylist() sonları şöyle Orada

s.createPlaylist(user_id, {name: 'Related Artist Playlist'}).then(function(data3) { 
     console.log(data3); 
     playlist_id = data3.uri; 
     playlist_id = playlist_id.substring(33); 
     console.log(playlist_id); 


     console.log(song_uris); 


     }); 

, console.log(song_uris) boş bir dizi gösterir:

bu çizgiyi 66 çalma listesi oluşturmak yerin altındaki olduğundan, boş bir dizi olarak gösteriyor Diğer taraftan, aşağıda addTracksToPlaylist()'u denediğimde, kullanıcının hesabına erişim yetkisi yok.

Kullanıcı yetkilendirme akışı, daha önce çalınan şarkıların listesini gösterme işlevinin temel işlevlerinden sonra eklenmiştir, ancak bu listeyi kullanıcının çalma listesine kaydetmek için nasıl etkili bir şekilde yeniden gözden geçirileceğimi bilmiyorum. Şu anda, Spotify hesabında sadece boş bir oynatma listesi oluşturuyorum.

addTracksToPlaylist() her async.times örneği gerçekleştirilinceye kadar bekleyebilecek ne tür bir olay dinleyicisi ekleyebilirim? Bu verileri almadan önce DOM zaten başlangıçta yüklü. this question'a baktım ama bu problemi çözmeme yardımcı olmadı. Teşekkürler!

DÜZENLEME: Şimdi ihtiyacım olan yolu song_uri dizi oluşturdum, ancak yine de çalma listesine alamıyorum. Erişim anahtarımın bulunduğu konumla oynuyorum, böylece oluşturulan oynatma listesine erişebiliyorum, ancak yine de şansım yok.

hattı 130 üzerinde console.log(song_uris); açıklamada ihtiyacım tamamlanan dizi gösteriyor, fakat s.addTracksToPlaylist(user_id, playlist_id, song_uris); takın zaman bu geliştirici konsolunda hatalar alıyorum: Temelde, bazıları için parametreyi almayı değil

POST https://api.spotify.com/v1/users/tenderoni-/playlists/7MtQTzUsxD4IEJ8NmmE36q/tracks?uris= 400 (Bad Request) 
bundle.js:10616 
Uncaught (in promise) XMLHttpRequest {} 

sebep. Ve daha önce playlist_id'u günlüğe kaydediyorum, bu yüzden çalıştığını söyleyebilirim (ayrıca, Spotify hesabımda oluşturulan belirtilen başlık ile boş oynatma listelerini görüyorum). Burada

Tam güncellenen kod: https://github.com/yamilethmedina/cs50xmiami/blob/master/assignments/portfolio/public/scripts.js

Answer 1

geri arama argüman async için.zamanlar ikinci bir 'sonuç' argümanını alabilir, bu yüzden song_uri ile 'next' olarak adlandırırsanız, döngünün her dönüşü etrafında alırsanız, sonunda song_uris alabilirsiniz, searchArtists aracılığıyla bir geri bildirimi iletebilir ve orada kullanabilirsiniz. İskelet sürümü:

$(document).ready(function($) { 
    $('#s').on('submit', function() { 
     searchArtists($('#originalartist').val(), function(err, song_uris) { 
      if (params.access_token) { 
       // omitted 
       s.setAccessToken(params.access_token); 
       s.getMe().then(function(data) { 
        console.log(data); 
        console.log(song_uris); 
       }); 
      } 
     }); 
     return false; 
    }); 
}) 

function searchArtists(originalArtist, callback) { 
    s.getArtistRelatedArtists(originalArtistId, function(err, data) { 
     async.times(counter, function(n, next) { 
      // omitted 
      next(related_artists[n].uri) 
     }, function(err, song_uris) { 
      callback(err, song_uris); 
     }); 

    }); 

}