title: Loading JSON into JavaScript variable locally without server-side script?
body: <p>I have 41 JSON objects, each with the same scheme. </p>
  
  <p>These objects are fairly large, and so I would like to load the object conditionally into a JavaScript script, when selecting an <code>&lt;option&gt;</code> from a <code>&lt;select&gt;</code> menu with an <code>id</code> of <code>myPicker</code>.</p>
  
  <p>So far, I have set up jQuery to handle changes on the <code>&lt;select&gt;</code>:</p>
  
  <pre><code>$('#myPicker').change(function() {
      alert('Value change to ' + $(this).attr('value'));
      $('#container').empty();
      init();
  });
  </code></pre>
  
  <p>The function <code>init()</code> draws stuff in <code>div</code> called <code>container</code>. </p>
  
  <p>When I change <code>myPicker</code>, I want <code>init()</code> to behave like <code>init(value)</code>, which in turn tells <code>init</code> to load one of 41 JSON objects from a file (based on <code>value</code>).</p>
  
  <p>Is loading a chunk of JSON from a file (located on the server-side) doable in this case, or do I need to use a server-side script handling Ajax form submissions and responses, etc.?</p>
  
  <p><strong>EDIT</strong></p>
  
  <p>I wrote the following code:</p>
  
  <pre><code>&lt;script language="javascript" type="text/javascript"&gt;
  
       $(document).ready(function(){
          $('#cellTypePicker').change(function() {
              alert('Value change to ' + $(this).attr('value'));
              $('#container').empty();
              initFromPicker($(this).attr('value'));
          });
       });
  
       function initFromPicker(name) {
          // pick default cell type from picker, if name is undefined
          if (typeof name === "undefined")
              name = 'AG10803-DS12374';
          var jsonUrl = "file://foo/bar/results/json/" + name + ".json";
          alert(jsonUrl);
          $.ajax({
              url: jsonUrl,
              dataType: 'json',
              success: function(response){
                  alert("Success!");
              },
              error: function(xhr, textStatus, errorThrown){
                  alert("Error: " + textStatus + " | " + errorThrown + " | " + xhr);
              }
          });
          init(); // refills container...
       }
  &lt;/script&gt;
  
  &lt;body onload="initFromPicker();"&gt;
  ...
  </code></pre>
  
  <p>The line <code>alert("Success!");</code> never gets called. </p>
  
  <p>Instead, I get the following error:</p>
  
  <pre><code>Error: error | Error: NETWORK_ERR: XMLHttpRequest Exception 101 | [object Object]
  </code></pre>
  
  <p>I am checking the value <code>jsonUrl</code> and it appears to be a proper URL. The file that it points to is present and I have permissions to access it (it is sitting in my home folder). Is there something I am still missing?</p>