javascript - 如何读取 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
  }
]

每个键都是我的 Select HTML 控件之一的 ID，值是指定控件所需的 Selected 值。

我正在使用 HTML input type=file 控件来允许用户在本地文件系统上选择上面显示的 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: object”行，我可以看到字符串已被解析并且键/值对似乎是正确的。但是，当在下一段代码中弹出警报时...

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

... 警告对话框显示“0 是 [object Object]”

最终我想要做的是将这些键/值对保存到 dict 变量中，这样我就可以查询字典并为每个选择控件获取所选值。

这可能很简单，但我只是没有看到。

如有任何帮助，我们将不胜感激。

作为奖励，如果有人有更简单的方法来读取本地 JSON 文件并使用这些值来设置 Select HTML 控件的 Selected 值，我很乐意看到它。

在此先感谢您提供的任何帮助。

Answer 1

您的 JSON.parse() 语句返回一个数组。然后当你写:

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

您正在迭代该数组并尝试处理数组中的唯一项(一个对象)，就像它有一个键和一个值，当它只有一个值时。你需要从result[0]中存储的对象中取出key和value，所以你需要再往下挖一层。

因为数组中只有一项 $.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]);
}