title: Load JSON data into jQuery component
body: <p>I want to display data from an external JSON file on a webpage. </p>
  
  <p>data.json:</p>
  
  <pre><code>{"users":[
      {
          "firstName":"S",
          "lastName":"S",
          "joined": {
              "month":"January",
              "day":12,
              "year":2012
          }
      },
      {
          "firstName":"S",
          "lastName":"P",
          "joined": {
              "month":"April",
              "day":28,
              "year":2010
          }
      }
   ]}
  </code></pre>
  
  <p>html code is as follows:</p>
  
  <pre><code>    &lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8" /&gt;
      &lt;title&gt;JSON Sample&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div id="placeholder"&gt;&lt;/div&gt;
      &lt;script src="http://code.jquery.com/jquery-1.7.1.min.js"&gt;&lt;/script&gt;
      &lt;script&gt;
    $.getJSON('data.json', function(data) {
          var output="&lt;ul&gt;";
          for (var i in data.users) {
              output+="&lt;li&gt;" + data.users[i].firstName + " " + data.users[i].lastName + "--" + data.users[i].joined.month+"&lt;/li&gt;";
          }
  
          output+="&lt;/ul&gt;";
          document.getElementById("placeholder").innerHTML=output;
    });
      &lt;/script&gt;
  &lt;/body&gt;hello world
  &lt;/html&gt;
  </code></pre>
  
  <p>When i run this code as it is on chrome I get the following error:</p>
  
  <p>XMLHttpRequest cannot load file:///C:/Users/.../jsonJquery/data.json. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.</p>
  
  <p>However, the same code runs on Firefox. I am not able to figure out what exactly is going wrong with the same code on two different browsers.</p>
  
  <p>On changing the html code to access the file from the web, I get the Cross-Origin error(this happens on both firefox and chrome)</p>
  
  <pre><code>    &lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8" /&gt;
      &lt;title&gt;JSON Sample&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div id="placeholder"&gt;&lt;/div&gt;
      &lt;script src="http://code.jquery.com/jquery-1.7.1.min.js"&gt;&lt;/script&gt;
      &lt;script&gt;
    $.getJSON('www.someDomain.com/data.json', function(data) {
          var output="&lt;ul&gt;";
          for (var i in data.users) {
              output+="&lt;li&gt;" + data.users[i].firstName + " " + data.users[i].lastName + "--" + data.users[i].joined.month+"&lt;/li&gt;";
          }
  
          output+="&lt;/ul&gt;";
          document.getElementById("placeholder").innerHTML=output;
    });
      &lt;/script&gt;
  &lt;/body&gt;hello world
  &lt;/html&gt;
  </code></pre>
  
  <p>My question is what is the reason of these errors? Is there some other way to access data that is placed remotely?</p>
  
  <p>UPDATE: The JSONP implementation works fine! Thanks!</p>
  
  <p>What I am trying to implement is to add accordion groups dynamically(by reading from a JSON file). But I keep getting the error: </p>
  
  <p>'Uncaught TypeError: $(...).accordion is not a function'</p>
  
  <p>Below is my code:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml" &gt;
  &lt;head&gt;
  &lt;script type="text/javascript" src="external/jquery-1.9.1.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="external/jquery.ui.core.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="external/jquery.ui.widget.min.js"&gt;&lt;/script&gt;
  &lt;script&gt;
  
  (function($) {
  var url = 'http://www.someDomain.com/data.json?callback=?';
  
  $.ajax({
     type: 'GET',
      url: url,
      async: false,
      jsonpCallback: 'jsonCallback',
      contentType: "application/json",
      dataType: 'jsonp',
      success: function(json) {
         console.dir(json.sites);
         var $bar = $( "#accordion" ).accordion();
         $bar.accordion('clearGroups');
         $.each(data, function(id, group){
          $bar.accordion('addGroup', group);
          });
      },
      error: function(e) {
         console.log(e.message);
      }
  });
  
  })(jQuery);
  
  &lt;/script&gt;
  &lt;style type="text/css"&gt;
  .widget
  {
  width: 300px;
  height: 300px;
  }
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div id="accordion" class="widget"&gt;&lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Can someone help me out with it?</p>
  
  <p>I am sure that this must be some syntactical error, but I am not able to figure it out! :(</p>