0

I have a list that is being returned from $.ajax function. I would like to add the returned list to a table. Below is a snippet of the code I am working with.

$(document).ready(function() {
$.ajax({
    type: "POST",
    url: "Home/LoadTable",
    success: function(data) {
        var loopList = data.message.NewList;
        alert(loopList);
        //tried the following :(
        //loopList.each(function(i) {
        //    addRecentData(i);
        //});
    },
    error: function() {
        alert("ERROR");
    }
});
});

function addRecentData(data) {
$('#newTable tr:last').after('<tr><td class="date"></td><td class="name"></td></tr>');

var $tr = $('#newTable tr:last');
$tr.find('.date').html(data.message);
$tr.find('.name').html(data.message.NewList[0].Name.toString());
}

Table

<table id = "newTable">                              
   <tr>
      <td class="date"></td>
      <td class="polNum"></td>
   </tr>
</table>
John Farrell
  • 24,673
  • 10
  • 77
  • 110
MrM
  • 21,709
  • 30
  • 113
  • 139
  • What does your JSON coming back look like? – Nick Craver Aug 10 '10 at 19:53
  • I have the JSON coming back with a list (NewList). The alert message does display that an object exists, with commas seperating the list objects ([Object object],[Object object]...). $tr.find('.name').html(data.message.NewList[0].Name.toString()); also displays the first name in the list – MrM Aug 10 '10 at 20:32
  • @user54197 - What about date? It's unclear fr your attempt where the date property lies on the json object – Nick Craver Aug 10 '10 at 20:48

1 Answers1

1

Something like this should work for you:-

    for (i = 0; i <= data.message.NewList.length - 1; i++) {
      $('#newTable > tbody:last').after('<tr><td class="date">' + data.message.NewList[i].Date + '</td><td class="name">' + data.message.NewList[i].Name.toString() + '</td></tr>');
    };

See Add table row in jQuery for more information about using the '> tbody:last' jquery selector

Community
  • 1
  • 1
Andy Robinson
  • 7,309
  • 2
  • 30
  • 20