Reputation: 8764
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
Upvotes: 24
Views: 88815
Reputation: 546443
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.
Upvotes: 52
Reputation: 43547
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.
Upvotes: 3
Reputation: 51965
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).
Upvotes: 2