title: Not able to fetch the JSON file in Google Chrome?
body: <blockquote>
    <p><strong>Possible Duplicate:</strong><br>
    <a href="https://stackoverflow.com/questions/2541949/problems-with-jquery-getjson-using-local-files-in-chrome">Problems with jQuery getJSON using local files in Chrome</a>  </p>
  </blockquote>
  
  
  
  <p>Both my html file "index.html" and "contact.json" are on same folder</p>
  
  <p>My code to fetch json file</p>
  
  <pre><code>function loadData(fileName) { 
      // getting json from a remote file
      // by returning the jqXHR object we can use the .done() function on it
      // so the callback gets executed as soon as the request returns successfully
      return $.getJSON( fileName + ".json");
  }
  
  function fillDataTable(data) {
  //  alert(data);
      // iterate over each entry in the data.info array
      $.each(data.info, function(index, element) {
      // append it to the table
      $("#contact").append('&lt;tr&gt;&lt;td&gt;' + element.name + '&lt;/td&gt;&lt;td&gt;'+ element.email +'&lt;/td&gt;&lt;td&gt;' + element.phone +'&lt;/td&gt;&lt;td&gt;' + '&lt;input type="button" id="edit" onclick="edit(this.name)" name="'+ element.name +'" value="Edit"&gt;&lt;/input&gt;' +'&lt;/td&gt;&lt;/tr&gt;')
      }); 
  }
  
  $(document).ready(function(){
  
      // the file's name. "contact" in this example.
      var myFile = "contact";
  
      loadData(myFile).done(function(data) {
          // check if we acutally get something back and if the data has the info property
          if (data &amp;&amp; data.info) {
              // now fill the data table with our data
              fillDataTable(data)
          }
      });
  });
  </code></pre>
  
  <p>My json file</p>
  
  <pre><code>{
      "info": [
          {
              "name":"Noob Here",
              "email":"myemail@server.com",
              "phone":"123456"
          },
          {
              "name":"Newbie There",
              "email":"hisemail@server.com",
              "phone":"589433"
          }
      ]
  }
  </code></pre>
  
  <p>My html</p>
  
  <pre><code>&lt;div id="container-1"&gt;
      &lt;ul&gt;
          &lt;li&gt;&lt;a href="#fragment-1"&gt;List&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;   
      &lt;div id="fragment-1"&gt;
          &lt;table id="contact"&gt;
          &lt;tr&gt;
          &lt;th&gt; Name &lt;/th&gt;
          &lt;th&gt;E-mail &lt;/th&gt;
          &lt;th&gt; Phone &lt;/th&gt;
          &lt;/tr&gt;
          &lt;/table&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CDN give</p>
  
  <pre><code>&lt;link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" /&gt;
  &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/jquery-ui.min.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>The code works fine on <code>Firefox</code> but not working in <code>Google Chrome</code>. </p>
  
  <p>Error obtained in <code>Google Chrome</code></p>
  
  <pre><code>XMLHttpRequest cannot load file:///home/user/jquery/contact.json. Origin null is not allowed by Access-Control-Allow-Origin.
  </code></pre>
  
  <p>Both html and json file are in same location. How to fix it?</p>