Add returned data from ajax call to a UL then update jQuery quicksand

Question

I'm building a list of users and trying to use jQuery quicksand to update the UL based upon the returned data from an ajax request.

The data is requested like so:

$.webMethod({
    url: 'http://staging.cmdapp.com/Services/Poll.asmx/LeaderboardGetTopScores',
    data: '{quizIDs:"'+quizIDs+'",numRecords:"'+numRecords+'"}',
    beforeSend: function () { },
    success: function (ret) {

        $.each(ret.leaderboard,function(i){
            // do something     
        });  

    },
    error: function (response) { console.log(response.responseText); }
});

The returned data is a JSON string and each user is defined by 'user_id'. JSON data (sorry for unformatted):

{"d":"{\"leaderboard\":[{\"user_id\":\"8\",\"first_name\":\"Kevin\",\"last_name\":\"McFarlane\",\"points\":\"1\",\"time_taken\":1408,\"incorrect_attempts\":0},{\"user_id\":\"9\",\"first_name\":\"Hanna\",\"last_name\":\"Gilbert\",\"points\":\"1\",\"time_taken\":4762,\"incorrect_attempts\":0},{\"user_id\":\"1\",\"first_name\":\"Adrian\",\"last_name\":\"Bathurst\",\"points\":\"0\",\"time_taken\":1616,\"incorrect_attempts\":0}]}"}

In my html page I have the quicksand list ready like so:

<ul class="quicksand">
    <li data-id="1">1</li>
    <li data-id="2">2</li>
    <li data-id="3">3</li>
    <li data-id="4">4</li>
</ul>

I now want to update the UL on every ajax request. How can I store the returned data and add each separate 'user' in a separate LI item?

I tried the following but no luck:

$.webMethod({
    url: 'http://staging.cmdapp.com/Services/Poll.asmx/LeaderboardGetTopScores',
    data: '{quizIDs:"'+quizIDs+'",numRecords:"'+numRecords+'"}',
    beforeSend: function () { },
    success: function (ret) {

        $.each(ret.leaderboard,function(i){
            pos = i + 1;
            str = '<li data-id="'+pos+'">' + ret.leaderboard[i].first_name + '&nbsp;' + ret.leaderboard[i].last_name + '</li>';       
        });

        $('.quicksand').quicksand( str, { adjustHeight: 'dynamic' } );     
        console.log(str);              
    },
    error: function (response) { console.log(response.responseText); }
});

It maybe worth noting that I can see the correct data in each LI items being pulled in every ajax request into the DOM, but it disapears immedietely and only the first LI item is displayed.

can you post the json blob here please – Atif Mar 13 '13 at 11:53 — Atif, Mar 13 '13 at 11:53
Done. JSON prettifier isn't working on it for some reason – tctc91 Mar 13 '13 at 11:55 — tctc91, Mar 13 '13 at 11:55

Atif · Answer 1 · 2013-03-13T12:06:13.883

Your JSON is incorrect. The value for the key d is actually a string here and not an object and that is the reason you feel that the JSON Formatter is not working. Its actually working but is treating it like a string instead on an Object.

You have to unwrap the quotes to treat it like an object or use $.parseJSON to convert it into an object.

$.webMethod({
    url: 'http://staging.cmdapp.com/Services/Poll.asmx/LeaderboardGetTopScores',
    data: '{quizIDs:"'+quizIDs+'",numRecords:"'+numRecords+'"}',
    beforeSend: function () { },
    success: function (ret) {

        ret = $.parseJSON(ret.d);

        $.each(ret.leaderboard,function(i){
            pos = i + 1;
            str = '<li data-id="'+pos+'">' + ret.leaderboard[i].first_name + '&nbsp;' + ret.leaderboard[i].last_name + '</li>';       
        });

        $('.quicksand').quicksand( str, { adjustHeight: 'dynamic' } );     
        console.log(str);              
    },
    error: function (response) { console.log(response.responseText); }
});

Fiddle - http://jsfiddle.net/rttAZ/

Hmm, that seems to return 'Uncaught TypeError: Cannot read property 'leaderboard' of null' — tctc91, Mar 13 '13 at 12:09
try fiddling around. Do you know to use a debugger? Firebug? Because its working in my jsFiddle and I cant think of any reason why it isn't working on your page. — Atif, Mar 13 '13 at 12:38

Add returned data from ajax call to a UL then update jQuery quicksand

1 Answers1