title: Tabulator: load data from a JSON file
body: <p>I want Tabulator to automatically load data from a JSON file.<br>
  I have made it work with a button.<br>
  I have read the q &amp; a here<br>
  <a href="https://stackoverflow.com/questions/52806073/load-table-data-from-text-file">Load table data from text file</a><br>
  I have also read the documentation here.<br>
  <a href="http://tabulator.info/docs/4.4/data#array-initial" rel="nofollow noreferrer">http://tabulator.info/docs/4.4/data#array-initial</a><br>
  (By the way, I was expecting the ajaxURL documentation to show a URL ending with a FILE name rather than &quot;/now&quot;... something like <code>$(&quot;#div1&quot;).load(&quot;demo_test.txt&quot;);</code> )</p>
  <p>I'm not a professional developer so please be gentle with me.</p>
  <p>Here is the content of the JSON file (called &quot;test_Array.txt&quot; and in the same directory as the HTML).</p>
  <pre><code>[
  {&quot;name&quot;: &quot;Oli Bob&quot;, &quot;age&quot;: &quot;12&quot;, &quot;col&quot;: &quot;red&quot;, &quot;dob&quot;: &quot;14/05/1982&quot;},
  {&quot;name&quot;: &quot;Mary May&quot;, &quot;age&quot;: &quot;1&quot;, &quot;col&quot;: &quot;blue&quot;, &quot;dob&quot;: &quot;14/05/1982&quot;},
  {&quot;name&quot;: &quot;Christine Lobowski&quot;, &quot;age&quot;: &quot;42&quot;, &quot;col&quot;: &quot;green&quot;, &quot;dob&quot;: &quot;22/05/1982&quot;},
  {&quot;name&quot;: &quot;Brendon Philips&quot;, &quot;age&quot;: &quot;125&quot;, &quot;col&quot;: &quot;orange&quot;, &quot;dob&quot;: &quot;01/08/1980&quot;},
  {&quot;name&quot;: &quot;Margret Marmajuke&quot;, &quot;age&quot;: &quot;16&quot;, &quot;col&quot;: &quot;yellow&quot;, &quot;dob&quot;: &quot;31/01/1999&quot;}
  ]
  </code></pre>
  <p>It passes validation at
  <a href="https://jsonlint.com/" rel="nofollow noreferrer">https://jsonlint.com/</a></p>
  <p>Here is the HTML</p>
  <pre><code>&lt;!DOCTYPE html&gt;
  
  &lt;html lang=&quot;en&quot;&gt;
  &lt;head&gt;
      &lt;link href=&quot;https://unpkg.com/tabulator-tables@5.1.3/dist/css/tabulator_site.min.css&quot; rel=&quot;stylesheet&quot;&gt; 
      &lt;script type=&quot;text/javascript&quot; src=&quot;https://unpkg.com/tabulator-tables@5.1.3/dist/js/tabulator.min.js&quot;&gt;&lt;/script&gt;
      &lt;meta charset=&quot;utf-8&quot; /&gt;
      &lt;title&gt;tabulator3&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;div id=&quot;example-table&quot;&gt;&lt;/div&gt;
  
      &lt;script&gt;
          //create Tabulator on DOM element with id &quot;example-table&quot;
          var table = new Tabulator(&quot;#example-table&quot;, {
          height:205, 
          // set height of table (in CSS or here), this enables the Virtual DOM and improves render speed dramatically (can be any valid css height value)
          //layout:&quot;fitDataFill&quot;,//fit columns to fit data and width of table (optional)
          //data:tableData, //set initial table data
              columns:[ //Define Table Columns
                  {title:&quot;Name&quot;, field:&quot;name&quot;, width:150},
                  {title:&quot;Age&quot;, field:&quot;age&quot;, align:&quot;left&quot;, formatter:&quot;progress&quot;},
                  {title:&quot;Favourite Color&quot;, field:&quot;col&quot;},
                  {title:&quot;Date Of Birth&quot;, field:&quot;dob&quot;, sorter:&quot;date&quot;, align:&quot;center&quot;},
              ]
          });
        
      //load sample data into the table
      table.setData(&quot;test_Array.txt&quot;)
      &lt;/script&gt; 
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p>What am I doing wrong?<br>
  Thank you.</p>