title: DataTables with Dynamic Columns
body: <p>I'm trying to render a datatable with dynamic columns using JSON but keep getting the following error:</p>
  
  <pre><code>Uncaught TypeError: Cannot read property 'length' of undefined.
  </code></pre>
  
  <p>Any help would be greatly appreciated.</p>
  
  <p>Thanks!!</p>
  
  <p>JS:</p>
  
  <pre><code>&lt;link href="http://cdn.datatables.net/1.10.4/css/jquery.dataTables.css" rel="stylesheet" type="text/css"/&gt;
  
  &lt;script src="http://cdn.datatables.net/1.10.4/js/jquery.dataTables.js" type="text/javascript"&gt;&lt;/script&gt;
  
  jQuery(document).ready(function() {
      var dataObject = '[{"COLUMNS":[{ "sTitle": "NAME"}, { "sTitle": "COUNTY"}],"DATA":[["John Doe","Fresno"],["Billy","Fresno"],["Tom","Kern"],["King Smith","Kings"]]}]';
  
      var columns = [];
  
      jQuery.each(dataObject.COLUMNS, function(i, value){
          var obj = { sTitle: value };
          columns.push(obj);
      });
  
      jQuery('#example').dataTable({
          "bProcessing": true,
          "bPaginate": true,
          "sPaginationType": "full_numbers",
          "aaData": dataObject.DATA,
          "aoColumns": columns
      });
  });
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;table cellpadding="0" cellspacing="0" border="0" class="display" id="example"&gt;
      &lt;tr&gt;&lt;thead&gt;column1&lt;/thead&gt;&lt;/tr&gt;
      &lt;tbody&gt;&lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>