Jquery Each Json Object

Question

I have a result set returning from a service that gives me the following json

{
    "ThreadCount":61,
    "GroupList":[
        {"userName":"KLT","count":2687},
        {"userName":"KCameron","count":718},
        {"userName":"IRG","count":156},{"userName":"JLB","count":123},{"userName":"HML","count":121},{"userName":"SMN","count":99},{"userName":"TBridges","count":68},{"userName":"ARF","count":65},{"userName":"MarkGreenway","count":61},{"userName":"SMC","count":55},{"userName":"EMD","count":52},{"userName":"PKP","count":41},{"userName":"KBounds","count":36},{"userName":"MAN","count":33},{"userName":"LAC","count":17},{"userName":"EPS","count":17},{"userName":"CAN","count":7},{"userName":"MAJ","count":3},{"userName":"CPC","count":2}]
}

I want to use Jquery (or javascript to put the threadCount in one div and add the usernames and counds to a Table

success: function(result) {
    $("#Unfiled").html(result.ThreadCount);
    $.each(result.GroupList, function(user) {
        $('#myTable > tbody').append(
            '<tr><td>'
            + user.userName
            + '</td><td>'
            + user.count +
            '</td></tr>'
        );
    });
}

For some reason I am not getting anything in my table...

By the way my HTML is here :

 <table>
    <tr>
        <td>
            Unfiled Emails:
        </td>
        <td id="Unfiled">
            -1
        </td>
    </tr>
    <tr>
        <td colspan="2">
            <table id="myTable" border="2" cellpadding="3" cellspacing="3">
            </table>
        </td>
    </tr>
</table>

I know i am missing something simple...

Thanks for your help in advance

Answer 1

When I've used $.each() I have used a function(i, item), where i is an integer indicating index, and item is the actual object. That is how the documentation shows it being done -- the method is described as function callback(indexInArray, valueOfElement).

Answer 2

I noticed your table does not actually have a tbody element. This could be part of your issue.

$('#myTable > tbody').append.....

<table id="myTable" border="2" cellpadding="3" cellspacing="3">
</table>

I would also suggest that you create a string in your $.each() loop and then do the following after your each loop:

$('#myTable > tbody').html(string);

This will reduce the overhead of appending each time you iterate over the array.

Answer 3

Inside the function provided to each, this refers to the current element. Try this:

$.each(result.GroupList, function() {
    $('#myTable > tbody').append(
        '<tr><td>'
        + this.userName
        + '</td><td>'
        + this.count +
        '</td></tr>'
    );
});

If that doesn't work for you, it may have something to do with this: $('#myTable > tbody'), considering that there is no tbody element. I believe that Internet Explorer will automatically create one but the other browsers won't. Check $.support.tbody to see if the browser does that for you.