CODEWITHSUNDEEP
javascriptjqueryhtmljsonsoundcloud
leaksterrr
leaksterrr

Reputation: 4167

Soundcloud object array is blank

Below is the following Javascript & HTML (using assemble+handlebars) and I can't figure out why the returned SC data isn't being displayed in the HTML? The correct number of <li> items is being generated but they're empty.

Is an extra step needed in my JS to enable soundcloud JSON? I'm using the Soundcloud API directly.

JS:

var soundcloud = {

    init: function (config) {
        SC.initialize({
            client_id: 'xxx'
        });
        this.template = config.template;
        this.container = config.container;
        this.fetch();
    },

    attachTemplate: function () {
        var template = Handlebars.compile(this.template);
        this.container.append(template(this.tracks));
    },

    fetch: function () {
        var self = this;
        SC.get("/users/robbabicz/tracks", function (data) {
            self.tracks = $.map(data, function (track) {
                return {
                    artwork: track.artwork_url,
                    duration: track.duration,
                    permalink: track.permalink_url,
                    listens: track.playback_count,
                    stream: track.stream_url,
                    title: track.title
                };
            });
            self.attachTemplate();
        });
    }

};

soundcloud.init({
    template: $('#tracks-template').html(),
    container: $('ul.soundcloud')
});

HTML:

<ul class="soundcloud">
    <script id="tracks-template" type="text/x-handlebars-template">
    {{#each this}}
        <li data-stream="{{stream}}">
            <p>Track: {{title}}</p>
        </li>
    {{/each}}
    </script>
</ul>

Upvotes: 1

Views: 330

Answers (1)

Kishore
Kishore

Reputation: 1912

Works Fine.. here is the DEMO

I changed the client_id from 'xxx' to 'YOUR_CLIENT_ID' and I see a response. you may just have to print the server response and see whats going on if you are using an actual client_id instead of xxx

I used the following mentioned here http://developers.soundcloud.com/docs/api/sdks#javascript it works fine

client_id: "YOUR_CLIENT_ID", redirect_uri: "http://example.com/callback.html"

Upvotes: 4

Related Questions