title: Populating a table with AJAX response
body: <p>My AJAX response contains the elements of a database. I have a table on my page <code>#people</code> and as the AJAX request succeeds, I need to populate my table with the database records. This is the code I am using (that is a <code>&lt;script&gt;</code> in my <code>index.html</code>):</p>
  
  <pre><code>$(document).ready(function(){
      $.ajax({
              type: "GET",
              url: "res/main.php",
              data: { command : "loadPeople" },
              success: function( resp ){
                  for(var i = 1; i&lt;= people.length; i++){
                      var tableRow = "&lt;tr&gt;&lt;td&gt;" + people[i].id + "&lt;/td&gt;&lt;td&gt;" + people[i].name + "&lt;/td&gt;&lt;/tr&gt;";
                      $("#people &gt; tbody:last").append(tableRow);
                  }
                  console.log(resp.people);
              }
      });
  });
  </code></pre>
  
  <p>(the code I am using to fill the table is taken from <a href="https://stackoverflow.com/questions/171027/add-table-row-in-jquery">this StackOverflow question</a>)</p>
  
  <p>I am using FireBug in Chrome, and when I refresh the page, nothing appears in its console, and my table is unchanged. What can I do to solve this error? Where is the error?</p>
  
  <p>EDIT:</p>
  
  <p>I renamed <code>resp</code> to <code>people</code>, now my table is being populated with about one thousand items labeled <code>undefined</code>.</p>
  
  <p>This is a sample of my <code>people</code>:</p>
  
  <pre><code>[{"id":"1","name":"Victor "},{"id":"2","name":"Dan "},{"id":"3","name":"John"},{"id":"4","name":"Mady"},{"id":"5","name":"Mary"},{"id":"6","name":"Michael"},{"id":"7","name":"Michaela"}]
  </code></pre>
  
  <p>(encoded in PHP)</p>