如何讀取JSON文件並將鍵/值對加載到字典中

Question

我正在嘗試使用JavaScript和jQuery來讀取本地JSON文件，並創建一個鍵/值對的字典，以便以後可以迭代設置幾個下拉列表的選定值。

我有一個map.json文件如下;

[ 
    { 
    "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 
    } 
] 

每個鍵都是我選擇的HTML控件之一的ID，該值是指定控件所需的選定值。

我正在使用HTML輸入類型=文件控件來允許用戶選擇本地文件系統上面顯示的map.json文件，並且我正在使用FileReader ReadAsText方法將內容讀取到本地變量中。然後我想將字符串解析爲一個鍵/值對的字典，我將稍後迭代設置一系列Select HTML控件的「Selected」值。

我使用下面的代碼，但它似乎不能成功地將JSON字符串鍵/值對獲取到字典中。

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

當我運行這段代碼並選擇map.json文件，我可以看到在調試器的文本字符串時，我檢查線路後，立即JSON變量的值...

var json = e.target.result; 

...執行。我可以看到它包含了帶有開始和結尾雙引號的JSON文本（我認爲這是因爲閱讀器的ReadAsText方法）。

當我檢查下一個行...

var result = JSON.parse(json); 

...我展開「0：對象」在調試線，我可以看到字符串被解析和鍵/值對似乎是正確的。然而，當警報在代碼的下一節彈出...

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

...警告對話框說，「0的翻譯：」

最終我想要做的就是保存這些鍵/值對轉換爲字典變量，以便我可以查詢字典並獲取每個選擇控件的選定值。

這可能很簡單，但我只是沒有看到它。

任何幫助將不勝感激。作爲獎勵，如果任何人有更簡單的方法來讀取本地JSON文件並使用這些值來設置選擇HTML控件的選定值，我很樂意看到它。

在此先感謝您提供的任何幫助。

Answer 1

你把你的JSON文件包裝在一個數組中，所以你想循環使用result[0]而不是result。

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

或者，你可以刪除周圍[]在你的JSON文件，如果你有超過對照，你的代碼將正常運行是。

Answer 2

您幾乎已經獲得了「字典」中的數據，或者像Javascript稱之爲對象。所有你需要做的是首先遍歷外部數組，然後是內部對象的鍵。試試這個：

// imagine this is the content returned from your file reader in e.target.result 
 

 
var result = [{ 
 
    "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 
 
},{ 
 
    "map_recipient_name": "Tax payer Name #2", 
 
    "more data goes here...": "foobar" 
 
}]; 
 

 
result.forEach(function(o) { 
 
    Object.keys(o).forEach(function(key) { 
 
    console.log(key + ' = ' + o[key]); 
 
    }) 
 
});

Answer 3

你JSON.parse()語句返回一個數組。然後，當你寫：

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

你迭代該數組，並試圖把數組中的唯一項目（對象），像它有一個鍵和一個值，當它只有一個值。您需要從存儲在result[0]中的對象中獲取密鑰和值，因此您需要挖掘另一層。

由於陣列中只有一個項目$.each()是矯枉過正。您想要循環的位置是存儲在數組的位置0中的對象，而不是數組本身。

這是你所需要的：

for(var key in result[0]){ 
    alert(key + ' is ' + result[0][key]); 
} 

這裏的工作代碼：

var jsonString = JSON.stringify([ 
 
    { 
 
    "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 
 
    } 
 
]); 
 

 
var result = JSON.parse(jsonString); 
 

 
for(var key in result[0]){ 
 
console.log(key + ' is ' + result[0][key]); 
 
}