title: JQuery DataTables - Not Displaying Data
body: <p>I'm trying to set up jQuery DataTables. All I need is to simply show some JSON data in the table.</p>
  
  <p>Here is my JS code. I know <em>myObj</em> is already a JSON object, but I passed in through JSON.stringify to be safe because I'm losing my mind over this.</p>
  
  <pre><code>var myObj = { "name":"John", "age":31, "address":"123 Street","city":"New York" };
  var data = JSON.stringify(myObj);
  
  $(document).ready(function() {
      $('#table').DataTable( {
          "ordering": true,
          "data": data,
          "searching": false,
          "columns": [
            {'data':'name'},
            {'data':'age'},
            {'data':'address'},
            {'data':'city'}
          ]
  
      });
  });
  </code></pre>
  
  <h3>HTML Code:</h3>
  
  <pre><code>  &lt;html&gt;
          &lt;head&gt;
          &lt;link href="assets/css/bootstrap.min.css" rel="stylesheet"&gt;
              &lt;link href="assets/css/style.css" rel="stylesheet"&gt;
              &lt;link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs-3.3.7/jq-2.2.4/dt-1.10.13/b-1.2.4/b-html5-1.2.4/b-print-1.2.4/fh-3.1.2/r-2.1.1/sc-1.4.2/datatables.min.css" /&gt;
          &lt;/head&gt;
      &lt;body&gt;
          &lt;table id="table" class="table table-hover"&gt;
                      &lt;thead&gt;
                          &lt;tr&gt;
                              &lt;th&gt;name&lt;/th&gt;
                              &lt;th&gt;age&lt;/th&gt;
                              &lt;th&gt;address&lt;/th&gt;
                              &lt;th&gt;city&lt;/th&gt;
                          &lt;/tr&gt;
                      &lt;/thead&gt;
                  &lt;/table&gt;
            &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"&gt;&lt;/script&gt;
              &lt;script src="assets/js/bootstrap.min.js"&gt;&lt;/script&gt;
              &lt;script type="text/javascript" src="https://cdn.datatables.net/v/bs-3.3.7/jq-2.2.4/dt-1.10.13/b-1.2.4/b-html5-1.2.4/b-print-1.2.4/fh-3.1.2/r-2.1.1/sc-1.4.2/datatables.min.js"&gt;&lt;/script&gt;
    &lt;script src="assets/js/dataLoader.js"&gt;&lt;/script&gt;
      &lt;/body&gt;
      &lt;/html&gt;
  </code></pre>
  
  <p>I'm not the best at formatting, but you get the idea. The above JS code is in the dataLoader.js file. The problem is I get this dataTables error when I run the html file.</p>
  
  <blockquote>
    <p>DataTables warning: table id=table - Requested unknown parameter 'name' for row 0, column 0.</p>
  </blockquote>
  
  <p>I'm really confused why it doesn't know what <em>name</em> is. If I run <code>console.log(data.name)</code> it returns <em>John</em>. Why is it not showing the data?</p>