title: Jquery Datatable not reading ajax data from json file
body: <p>I am creating some mockups using dummy data. I have to show some data, which I have stored in a <code>.json</code> file as of now, in <code>jquery datatable</code> using <code>ajax</code>. I have gone through the <a href="http://www.datatables.net/examples/data_sources/ajax.html" rel="nofollow noreferrer">examples</a> in <code>Datatables site</code> but the data doesn't show up. May be its not reading the data correctly or at all. Have tried a lot of workarounds but nothing seems to be working.</p>
  
  <p>The folder structure is as follows:</p>
  
  <p><img src="https://i.stack.imgur.com/hrbmb.png" alt="enter image description here"></p>
  
  <p>My HTML code is in file <code>backlog.html</code>. It goes like this:</p>
  
  <pre><code>&lt;table id="backlogTable" class="grid"&gt;
              &lt;thead&gt;
                  &lt;tr&gt;
                      &lt;th nowrap="nowrap" width="230px"&gt;Hotel Name One&lt;/th&gt;
                      &lt;th nowrap="nowrap" width="110px"&gt;Hotel Price One&lt;/th&gt;
                      &lt;th nowrap="nowrap" width="230px"&gt;Hotel Name Two&lt;/th&gt;
                      &lt;th nowrap="nowrap" width="110px"&gt;Hotel Price Two&lt;/th&gt;
                      &lt;th nowrap="nowrap" width="230px"&gt;Hotel Name Three&lt;/th&gt;
                      &lt;th nowrap="nowrap" width="110px"&gt;Hotel Price Three&lt;/th&gt;
                  &lt;/tr&gt;
              &lt;/thead&gt;
              &lt;tbody&gt;
              &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>The script is written inside html file only. The javascript code is:</p>
  
  <pre class="lang-js prettyprint-override"><code>  $(document).ready(function() {
  
  $("#loading").ajaxStart(function () {
      $(this).show();
  });
  
  $("#loading").ajaxStop(function () {
      $(this).hide();
  });
  
  $.ajax(
           {              
                  type            : "GET",
                  url             : "resources/LasVegas.json",
                  contentType     : 'application/json',
                  dataType        : 'json',
                  success         : function(json)
                  {                  
                      oTable = $("#backlogTable").dataTable({
                          "aaData"            :   json.aaData,
                          "bProcessing"       : true,
                          "sPaginationType"   : "full_numbers",
                          "bJQueryUI"         : true,
                          "bRetrieve"         : true,
                          "bPaginate"         : true,
                          "bStateSave"        : true,
                          "scrollY"           : 200,
                          "scrollCollapse"    : true,
                          "jQueryUI"          : true,
                          "bSort"             : true,
                          "iDisplayLength"    : 10,
                          "oLanguage": {
                                          "sProcessing": "&lt;img src='resources/images/loader.gif'/&gt;",
                                          "sEmptyTable": "No records found."
                                       },
                          "aoColumns": [
                                              { "sClass": "left"},
                                              { "sClass": "left"},
                                              { "sClass": "left"},
                                              { "sClass": "left"},
                                              { "sClass": "left"},
                                              { "sClass": "left"}
                                        ],
                          "error": function() {
                                    alert("Failed to load Data");
                                   }
                      });
                  }
  
            }
      );
      });
  </code></pre>
  
  <p>When I try to open the HTML file in browser, only the table headers are shown and nothing else. No data, not even the empty table message. When I check the browser console, it says</p>
  
  <pre><code>XMLHttpRequest cannot load file:///Users/vshukla/Pictures/Mockups/html/resources/LasVegas.json. Cross origin requests are only supported for protocol schemes: http, data, chrome-extension, https, chrome-extension-resource.
  </code></pre>
  
  <p>following is the <code>LasVegas.json</code> data:</p>
  
  <pre><code>    {
    "aaData": [
                      [
                           "Wynn Las Vegas",
                           "$151",
                           "Caesers Las Vegas",
                           "$239.00",
                           "Flamingo Las Vegas",
                           "$151"
                      ],
                      [
                           "The Palazzo",
                           "$159",
                           "The Palazzo Resort Hotel Casino",
                           "$249.00",
                           "The Balazio Resort",
                           "$159"
                      ],
                      [
                           "Encore at Wynn Las Vegas",
                           "$151",
                           "Wynn Las Vegas",
                           "$359.00",
                           "Hotel Las Vegas",
                           "$151"
                      ],
                      [
                           "Caesars Palace",
                           "$229",
                           "Flamingo Bay",
                           "$219.00",
                           "Caesars Palace &amp; Resort",
                           "$229"
                      ]
      ]
      }
  </code></pre>
  
  <p>please help.</p>