title: How do I read a JSON file and load the key/value pairs in to a dictionary
body: <p>I am trying to use JavaScript and jQuery to read a local JSON file and create a dictionary of key/value pairs that I can later iterate to set the selected value of several drop down lists. </p>
  
  <p>I have a map.json file as follows;</p>
  
  <pre><code>[
    { 
      "map_recipient_name": "Tax payer Name",
      "map_delivery_company_name": null,
      "map_delivery_street_address": "Address1",
      "map_delivery_apt_suite": "Address2",
      "map_delivery_city": "City",
      "map_delivery_state": "State",
      "map_delivery_zip": "Zip",
      "map_delivery_zip_4": "Zip+4",
      "map_customer_reference_number": "Notice Number",
      "map_notice": null,
      "map_recipient_email": null,
      "map_send_email": null,
      "map_standardize_address": null
    }
  ]
  </code></pre>
  
  <p>Each key is the ID of one of my Select HTML controls and the value is the desired Selected value for the specified control.</p>
  
  <p>I am using an HTML input type=file control to allow the user to select the map.json file shown above on the local file system and I am using a FileReader ReadAsText method to read the contents into a local variable. Then I want to parse the string into a dictionary of key/value pairs that I will later iterate to set the "Selected" value of a series of Select HTML controls.</p>
  
  <p>I am using the code below but it doesn't seem to be able to successfully get the JSON string key/value pairs into the dictionary.</p>
  
  <pre><code>var field_mapping = document.getElementById('fieldmapping')
  function read_map_file(e) {
      var map_file = e.target.files[0]
      if (!map_file) {
          return;
      }
      var dict = {};
      var reader = new FileReader();
      reader.onload = function (e) {
          var json = e.target.result;
          var result = JSON.parse(json);
          $.each(result, function (key, value) {
              alert(key + ' is ' + value);
              //dict[key] = value;
          });
      };
      reader.readAsText(map_file);
  
  }
  
  if (field_mapping.addEventListener) field_mapping.addEventListener('change', read_map_file, false);
  </code></pre>
  
  <p>When I run this code and select the map.json file, I can see the string of text in the debugger when I examine the value of the json variable immediately after the line...</p>
  
  <pre><code>var json = e.target.result;
  </code></pre>
  
  <p>... executes. I can see that it has enclosed the JSON text with beginning and trailing double quotes (which I assume are because of the ReadAsText method of the reader). </p>
  
  <p>When I examine the next line...</p>
  
  <pre><code>var result = JSON.parse(json);
  </code></pre>
  
  <p>... and  I expand the "0: object" line in the debugger, I can see that the string has been parsed and the key/value pairs appear to be correct. However, when the alert pops up in the next section of code...</p>
  
  <pre><code>$.each(result, function (key, value) {
      alert(key + ' is ' + value);
      //dict[key] = value;
  });
  </code></pre>
  
  <p>... The alert dialog says "0 is [object Object]"</p>
  
  <p>ultimately what I want to do is save these key/value pairs into the dict variable so that I can then query the dictionary and get the selected value for each of the select controls. </p>
  
  <p>This is probably something simple, but I am just not seeing it.</p>
  
  <p>Any help would be greatly appreciated. </p>
  
  <p>As a bonus, if anyone has a simpler way to read a local JSON file and use the values to set the Selected values of Select HTML controls, I would love to see it.  </p>
  
  <p>Thanks in advance for any help you can offer. </p>