EiEiGuy EiEiGuy - 2 months ago 11
Javascript Question

How do I read a JSON file and load the key/value pairs in to a dictionary

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.

I have a map.json file as follows;

"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

Each key is the ID of one of my Select HTML controls and the value is the desired Selected value for the specified control.

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.

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.

var field_mapping = document.getElementById('fieldmapping')
function read_map_file(e) {
var map_file = e.target.files[0]
if (!map_file) {
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;


if (field_mapping.addEventListener) field_mapping.addEventListener('change', read_map_file, false);

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...

var json = e.target.result;

... 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).

When I examine the next line...

var result = JSON.parse(json);

... 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...

$.each(result, function (key, value) {
alert(key + ' is ' + value);
//dict[key] = value;

... The alert dialog says "0 is [object Object]"

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.

This is probably something simple, but I am just not seeing it.

Any help would be greatly appreciated.

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.

Thanks in advance for any help you can offer.


You wrapped your JSON file in an array, so you want to loop over result[0] and not result.

$.each(result[0], function (key, value) {

Or you can just remove the surrounding [] in your JSON file if you have control over that, and your code should work as is.