JSFiddle - React, Tailwind, and code Playground

by D S

HTML

<script src="//connect.soundcloud.com/sdk.js"></script>
<div class="playerList">
    	<ul class="list">
        
		</ul>
</div>

JavaScript

SC.initialize({
    client_id: "b8f06bbb8e4e9e201f9e6e46001c3acb",
});

$.getJSON("http://www.json-generator.com/api/json/get/bLjOHIYsAy?indent=2", function(data){ //Link of the playlist
    var answer = {};

    $.each(data.PlayListArray, function(key, val){ //navigate to array called PlayListArray
        var songLink = val.URL; // the value of URL in the array
        SC.get('/resolve', { url: songLink }, function(track) {
            answer[songLink] = track;
            if(Object.keys(answer).length == data.PlayListArray.length) {
                // we've got all results: let's process them by iterating on data.PlayListArray again
                $.each(data.PlayListArray, function(key, val){
                    var track = answer[val.URL];
					var trackTitle = track.title;
                    
						$(".playerList .list").append(
						"<li id=" + track.id +">" + 
						"<h3 class=\"songTitle\">" + track.title + "</h3>" +
						"</li>");
					
				});
            }
        });
    });
});

$(".playerList .list").click(function(){
	console.log($(this).attr('id'));
});