Search code examples
javascriptjqueryjsonapisoundcloud

Not showing values from API on html page but loading the JSON

Trying to pull a list of tracks from soundcloud api.

  1. song one
  2. song two
  3. song three

Gettin json back:

enter image description here

But its not showing results in html

Heres html:

<!DOCTYPE html>
<html>
<head>
    <!-- bootstrap and js -->
    <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" title="bootstrap-css" charset="utf-8">
    <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

    <!-- soundcloud info -->
    <script src="https://connect.soundcloud.com/sdk/sdk-3.0.0.js"></script>
    <script src="js/script.js"></script>
</head>
<body>
    <ol id="track-list"></ol>
</body>
</html>

Heres js:

SC.initialize({
    client_id: "myid",
    redirect_uri: "mycallback",
});

var userId = 39090345; // user_id of Prutsonic

SC.get("/tracks", {
    user_id: userId,
    limit: 100
}, function (tracks) {
    var tmp = '';

    for (var i = 0; i < tracks.length; i++) {
        tmp = '<a href="' + tracks[i].permalink_url + '">' + tracks[i].title + ' - ' + tracks[i].duration + '</a>';

        $("<li/>").html(tmp).appendTo("#track-list");
    }
});
Solution

  • Based on the API, it seems like you should change: }, function (tracks) { with }).then(function (tracks) {. The API expects you to use the promise. 

    SC.get("/tracks", {
    user_id: userId,
    limit: 100
}).then(function (tracks) {
    var tmp = '';

    for (var i = 0; i < tracks.length; i++) {
        tmp = '<a href="' + tracks[i].permalink_url + '">' + tracks[i].title + ' - ' + tracks[i].duration + '</a>';
        $("<li/>").html(tmp).appendTo("#track-list");
    }
});