title: Populating a table from JSON with jQuery
body: <p>Is this an effective way to populate a table from with JSON data using jQuery or is there a better/less costly way? The maximum number of rows will be around 100. I'd prefer not to use a plugin.</p>
  
  <p>JS:</p>
  
  <pre><code>$.ajax({
      url: 'public.json',
      dataType: 'json',
      success: function(data) {
          var row = '&lt;tr class="header"&gt;';
          for (var i in data.headers) {
              row += '&lt;th style=""&gt;&lt;a href="#" class="sort"&gt;&lt;span&gt;' + data.headers[i] + '&lt;/span&gt;&lt;/a&gt;&lt;/th&gt;';
          }
          row += '&lt;/tr&gt;'
          $(row).appendTo('table.data');
          row = '';
          for (var i in data.rows) {
              row += '&lt;tr id="' + i + '"&gt;';
              row += '&lt;td&gt;' + data.rows[i].date + '&lt;/td&gt;';
              row += '&lt;td&gt;' + data.rows[i].company + '&lt;/td&gt;';
              row += '&lt;td&gt;' + data.rows[i].location + '&lt;/td&gt;';
              ...
              row += '&lt;/tr&gt;';
          }
          $(row).appendTo('table.data');
      },
  });
  </code></pre>
  
  <p>JSON:</p>
  
  <pre><code>{
      "headers": {
          "date": "Date",
          "company": "Company",
          "location": "Location",
          ...
      },
      "rows": [{
          "date": "09/18/2011",
          "company": "Company name",
          "location": "US",
          ...
      },
      ...
  }
  </code></pre>
  
  <p><strong>EDIT:</strong> Essentially, I'm trying to figure out if lumping all the rows into a string, turning it into a jQuery object and then appending it to the table is a good idea, assuming this can be done multiple times on the page to refresh the data.</p>