javascript - 转换 JSON 数据并在复选框、文本、下拉或单选输入类型中实现值的最佳方法？

Question

我正在尝试为我的单页应用程序找到最有效和通用的解决方案。有 5 个不同的选项卡。每个选项卡都在 JSON 对象中加载数据。用户单击选项卡后，JSON 数据就会使用唯一键填充到对象中。如果用户单击“编辑”按钮，我将循环遍历 JSON 数据并填充表单字段。这是我的问题，我的表单上有复选框、单选、文本和下拉菜单字段。每种数据类型需要不同的数据类型。我的 JSON 对象中的数据未转换为复选框或单选类型输入字段。我想知道解决这个问题的最佳方法是什么？

这是我的 JSON 数据的示例:

var jsonData = {
   "frmTab1":{"st_fname":"mike","st_lname":"cook","st_iseligible":"yes"},
   "frmTab2":{"sa_condition":"yes","sa_evaluation":"no"},
   "frmTab3":{"se_respons":"yes","se_option":"3"},
   ... and so on
}

这是我的 JQuery 函数，用于填充表单:

$('input[name="hmButton"]').on('click', function formSubmit(){
    var btnVal = $(this).val();

    if(btnVal == 'Edit'){
        var jsonKey = $(this).attr('data-json'); //In data json is from id value

        if($.isEmptyObject(jsonData[jsonKey])){
            console.log('no data');
        }else{
            $.each(jsonData[jsonKey], function(index, element) {
                //Here I need to check the input type and set checked if type is checkbox, or value if it's radio type, and same thing for drop down.
                $('#frm' + index).val(element); 
            });
        }
    }
});

我想知道是否可以使用另一个 JSON 对象来完成此操作，该对象将具有输入类型不等于文本的每个字段的键。如果有人可以提供帮助，请告诉我。我正在努力让这个充满活力。这可能会在我的应用程序的其他情况下使用。谢谢。

Answer 1

这个...

var jsonData = {
    'frmTab1': {
        'st_fname': 'mike',
        'st_lname': 'cook',
        'st_iseligible': 'yes'
    },
    'frmTab2': {
        'sa_condition': 'yes',
        'sa_evaluation': 'no'
    },
    'frmTab3': {
        'se_respons': 'yes',
        'se_option': '3'
    }
}

...是一个 JavaScript 对象。 JSON 是一种基于文本的数据交换格式，尽管它是用 JavaScript Object Notation(因此是 JSON)尽量避免将 JavaScript Object 与 JSON 数据混淆。现在这已经不成问题了...:)

虽然 JSON 键必须在引号(“...”)之间定义，只要 JavaScript 对象中的键遵守通常的语法要求，则可以省去键的引号...

var jsonData = {
    frmTab1: {
        st_fname: 'mike',
        st_lname: 'cook',
        st_iseligible: 'yes'
    },
    frmTab2: {
        sa_condition: 'yes',
        sa_evaluation: 'no'
    },
    frmTab3: {
        se_respons: 'yes',
        se_option: '3'
    }
};

您建议引用另一个对象，该对象充当填充页面的函数和 jsonData 变量中的信息之间的中介，这是可行的 - 也许是这样的......

var dataMap = {
    waypoint_1: jsonData.frmTab1,
    waypoint_2: jsonData.frmTab2,
    waypoint_3: jsonData.frmTab3
    /* ... etc ... */
};

我在这里所说的“waypoint_n”将反射(reflect)您期望从页面元素属性中检索的属性/字符串 - 因此类似于...

var dKey = /* attribute value or property (String) */
var data = dataMap[ dKey ];

...然后将 jsonData 对象中的所需信息放入 data 变量中。

但是，由于您已经在对象 (jsonData) 中拥有此信息，为什么不简单地修改其键以反射(reflect)您期望的属性值呢？

您可能会发现这些链接很有用:

• Eloquent JavaScript:The Secret Life of Objects
• Eloquent JavaScript:Data Structures: Objects and Arrays
• MDN:Working with JSON data