title: DataTables get field headers based on input json object
body: <p>I'm trying to create a DataTables object from a json object (following <a href="https://datatables.net/manual/data/" rel="nofollow noreferrer">this</a> example).  I can assume the input is an array of objects, each with the same set of keys.</p>
  
  <p>I want to create a table that gets its column headers dynamically from the first row of the input.</p>
  
  <p>See my js function below</p>
  
  <pre><code> function populateDataTable(json_obj) {
  /*extract fields from ajax return*/
  var columns_obj = [];
  for (var key in json_obj[0]) {
    columns_obj.push({
      'data': key
    })
  }
  console.log(columns_obj);
  
  /*draw html table container*/
  var html_table = '&lt;table id="example" class="display" width="100%" cellspacing="0"&gt;&lt;thead&gt;&lt;tr&gt;';
  for (var i = 0; i &lt; columns_obj.length; i++) {
    html_table += '&lt;th&gt;' + columns_obj[i]['data'] + '&lt;/th&gt;';
  }
  html_table += '&lt;tr&gt;&lt;/thead&gt;&lt;/table&gt;';
  console.log(html_table);
  $('#query_output').html(html_table);
  console.log('columns_obj:', columns_obj.length, 'ajax data length:', Object.keys(json_obj[0]).length);
  console.log($('#query_output th').length);
  alert('pause');
  $('#query_output table').DataTable({
    data: json_obj,
    columns: columns_obj
  });
  </code></pre>
  
  <p>}</p>
  
  <p>In my fiddle here, contrary to my expectation the data is assigned entirely to a single field header 'name'.  Be warned that running this messes with the sandboxing of the fiddle.</p>
  
  <p><a href="https://jsfiddle.net/mosarani/yp1hLw1L/" rel="nofollow noreferrer">JS Fiddle</a></p>