title: add column headers from array to datatables jquery
body: <p>I am creating a Datatable in jquery. I have an array of strings which contain the titles for the headers. I want to add these titles to the datatable. How can I do this?</p>
  
  <p>Here is my code:-</p>
  
  <p>html code:-</p>
  
  <pre><code>&lt;table border="1" id="mDataTable" class="display" cellspacing="1" cellpadding="1" width="100%"&gt;
          &lt;thead&gt;
              &lt;tr&gt;
  
              &lt;/tr&gt;
          &lt;/thead&gt;
          &lt;tbody&gt;
  
          &lt;/tbody&gt;
      &lt;/table&gt;
  </code></pre>
  
  <p>jquery code:-</p>
  
  <pre><code> var columnArray = jsonArray[1];
                      var titleArray = [];
                      for (var j = 0; j &lt; columnArray.length; j++) {
  
                          var parsedJson = $.parseJSON(JSON.stringify(columnArray[j]))
                          var mTitles = parsedJson["name"];
                          titleArray.push(mTitles);
  
                      }
  
  
                      $('#mDataTable').DataTable({
  
                          "columns": titleArray
                      });
  </code></pre>
  
  <p>the <code>titleArray = ["America", "India", "China", "Japan"]</code></p>
  
  <p>the </p>
  
  <pre><code>jquery[1] = "Columns":[{"name":"ID","field":"id"},{"name":"America","field":"america"},{"name":"India","field":"india"},{"name":"China","field":"china"},{"name":"Japan","field":"japan"}],
  </code></pre>
  
  <p>Doing the above I get the error </p>
  
  <pre><code>Uncaught TypeError: Cannot use 'in' operator to search for '10' in America
  </code></pre>
  
  <p><strong>EDIT</strong> </p>
  
  <p>With CerilBoss's answer I get a table like this</p>
  
  <p><img src="https://i.stack.imgur.com/Svn7P.png" alt="enter image description here"></p>
  
  <p>I am new to jquery and would appreciate any help.</p>