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：object”行，我可以看到字符串已被解析，键/值对看起来是正确的。但是，当警报在下一部分代码中弹出时......

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

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

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

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

非常感谢任何帮助。

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

提前感谢您提供的任何帮助。

Answer 1

您将JSON文件包装在一个数组中，因此您希望循环遍历result[0]而不是result。

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

或者您可以删除JSON文件中的周围[]，如果您可以控制它，并且您的代码应该按原样运行。

Answer 2

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

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

你正在迭代那个数组并尝试处理数组中的唯一一个项（一个Object），就像它有一个键和一个值，只有它有一个值。您需要从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]);
}

Answer 3

你几乎把数据放在'字典'中，或者像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]);
  })
});

如何读取JSON文件并将键/值对加载到字典

3 个答案: