EiEiGuy EiEiGuy - 4 months ago 19
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.

Answer Source

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.