JSFiddle - React, Tailwind, and code Playground

by D S

HTML

<script src="https://connect.soundcloud.com/sdk/sdk-3.1.2.js"></script>
<div class="playlist"></div>

JavaScript

$.ajax({
  url: "https://dl.dropboxusercontent.com/u/33538012/text.xml",
  dataType: "xml",
  success: parse,
  error: function() {
    alert("Error");
  }
});

function parse(document) {
  var inc = 1;

  $(document).find("track").each(function() {
    var rowNum = inc;
    var trackType = $(this).find('type').text();
    var trackTitle = $(this).find('title').text();
    var soundcloud_url = $(this).find('soundcloud_url').text();
    var spotify_track_uri = $(this).find('spotify_track_uri').text();
    var itunes_id = $(this).find('itunes_id').text();
    
    if (trackType == "audio") {
      inc = inc + 1;
      $(".playlist").append("<div id='" + rowNum + "' >" + rowNum + " " + trackTitle + "</div>");
      
    } else if (trackType == "soundcloud") {
      inc = inc + 1;
      SC.initialize({
        client_id: "b8f06bbb8e4e9e201f9e6e46001c3acb"
      });
      SC.resolve(soundcloud_url).then(function(sound) {
        trackTitle = sound.title;
        $(".playlist").append("<div id='" + rowNum + "' >" + rowNum + " " + trackTitle + "</div>");
      });
      
    } else if (trackType == "spotify") {
      inc = inc + 1;
      var spotifyLink = "https://api.spotify.com/v1/tracks/" + spotify_track_uri;
      $.getJSON(spotifyLink, function(data) {
        trackTitle = data.name;
        $(".playlist").append("<div id='" + rowNum + "' >" + rowNum + " " + trackTitle + "</div>");
      });
      
    } else if (trackType == "itunes") {
      inc = inc + 1;
      var iTuensLink = "https://itunes.apple.com/lookup?id=" + itunes_id + "&callback=?";
      $.getJSON(iTuensLink, function(data) {
        trackTitle = data.results[0].trackName;
        $(".playlist").append("<div id='" + rowNum + "' >" + rowNum + " " + trackTitle + "</div>");
      })
    }
    
  });

}