Iterating through ajax response object to create table with jquery
<p>My ajax code is as follows:    </p>

<pre><code>$(document).ready(function(){

$("#displayButton").click(function(){

var format = $("#format").val();

$.ajax({

url: 'getEmployees',
type: 'GET', 
data: {format: format},
success: function(data) {       

$('#place').text(data);

}

});

});
</code></pre>

<p>This code invokes my servlet, gets the parameter for the format and sends the data to the following section of my html:</p>

<pre><code>&lt;span id="place"&gt;&lt;/span&gt;
</code></pre>

<p>When the button is pressed on my html page, the result are generated in json, xml or plain text. I am trying to format this so that they are created in a table and without all the tags etc.</p>

<p>I have found the following on JFiddle:</p>

<pre><code>var jsonData = '[{"rank":"9","content":"Alon","UID":"5"},    {"rank":"6","content":"Tala","UID":"6"}]';

$.ajax({
url: '/echo/json/',
type: 'POST',
data: {
    json: jsonData
},
success: function (response) {
    var trHTML = '';
    $.each(response, function (i, item) {
        trHTML += '&lt;tr&gt;&lt;td&gt;' + item.rank + '&lt;/td&gt;&lt;td&gt;' + item.content + '&lt;/td&gt;&lt;td&gt;' + item.UID + '&lt;/td&gt;&lt;/tr&gt;';
    });
    $('#records_table').append(trHTML);
}
});
</code></pre>

<p>Then in the html:</p>

<pre><code>&lt;table id="records_table" border='1'&gt;
&lt;tr&gt;
    &lt;th&gt;Rank&lt;/th&gt;
    &lt;th&gt;Content&lt;/th&gt;
    &lt;th&gt;UID&lt;/th&gt;
&lt;/tr&gt;
</code></pre>

<p></p>

<p>But I don't think this is suitable as I am accessing my data from a servlet and don't think I can access the raw data directly in ajax.</p>

<p>If you know how to iterate through a list generated from the servlet in the above code, please point me in the right direction.</p>