Каждый цикл, возвращающий повторяющиеся данные из Soundcloud API

Question

Я пытаюсь перечислить несколько треков на одной странице с помощью Soundcloud API. Я хочу перебрать каждый DIV, чтобы он извлекал правильные отдельные данные, используя ссылку API /tracks. Однако он просто извлекает одни и те же данные в каждый div (то же произведение, тот же звук и т. Д.). Если я делаю консольный журнал переменной для ссылки на идентификатор API /tracks, тогда она корректно перебирает каждый div и правильно перечисляет разные идентификаторы. Почему он вытягивает правильные идентификаторы, но затем извлекает дубликаты данных?

$(document).ready(function() { 

    // Loop over each mix 
    $(".mix").each(function(){ 

    // Set the mix ID as a variable 
    var mixID = $(this).data("mix"); 

    // Test it's getting correct unique track ID's 
    console.log($(this).data("mix")); 

    // Get the track meta data 
    SC.get('/tracks/'+mixID+'', function(track) { 
     var artwork = track.artwork_url; 
     var artwork = artwork.replace('-large', '-t500x500'); 

     $(".mix__user").html(track.user.username).attr("href", track.user.permalink_url); 
     $(".mix__artwork").attr("src", artwork); 
     $(".mix__waveform").attr("src", track.waveform_url); 
    }); 

    // Stream the track 
    SC.stream('/tracks/'+mixID+'', function(sound) { 

    var is_playing = false; 

    // Track controls 
    $('.mix__control').click(function(e) { 
     e.preventDefault(); 

     if(is_playing === false){ 
      sound.start(); 
      is_playing = true; 
      $(this).toggleClass("is_playing").html("Pause"); 

     } else if (is_playing === true) { 
      sound.pause(); 
      is_playing = false; 
      $(this).toggleClass("is_playing").html("Play"); 
     } 
    }); 
    }); 
}); 
}); 

Существует несколько Craft CMS язык шаблонов в HTML.

{% for entry in craft.entries.section('mix') %} 
    <article class="mix" data-mix="{{ entry.mixId }}"> 

    <div class="mix-meta"> 
      <button class="mix__control ss-icon">Play</button> 
      <img class="mix__artwork" src="">   
     <img class="mix__waveform" src=""> 
     </div> 

     <a href="{{ entry.url}}" class="mix-wrap"> 
     <h1 class="mix__title">{{ entry.title }}</h1> 
     <time class="mix__date" datetime="2008-02-14 20:00">{{ entry.postDate.format('d F Y') }}</time> 

     <ol class="mix__tracklist"> 
     {% for block in entry.tracklisting %} 
      {% if block.type == "tracklist" %} 
       <li><span class="mix__artist">{{ block.artist }}</span> - <span class="mix__track">{{ block.track }}</span></li> 
      {% endif %} 
     {% endfor %} 
     </ol> 
     </a> 
    </article> 
{% endfor %} 

Answer 1

Глядя на ваш код, я думаю, что вы работаете в проблему с вашим JQuery селекторы обновления каждый $(".mix__XXXX") на вашей странице, если вы действительно хотите только обновить те, в текущем <article class="mix">. Вы бы хотели сменить эти селекторы на $(this).find(".mix__XXXX");

Бонусный наконечник: присвоение переменной $ (этой) переменной в качестве $this = $(this) будет держать jquery от необходимости запускать ее функцию упаковки каждый раз.

Обновление с закрытием: (непроверенные)

(function($theMix) {  
    SC.get('/tracks/'+mixID+'', function(track) { 
     var artwork = track.artwork_url; 
     var artwork = artwork.replace('-large', '-t500x500'); 

     $theMix.find(".mix__user").html(track.user.username).attr("href", track.user.permalink_url); 
     $theMix.find(".mix__artwork").attr("src", artwork); 
     $theMix.find(".mix__waveform").attr("src", track.waveform_url); 
    }); 
})($(this));