如何使用jQuery将查询字符串或JSON对象映射转换为单个JSON对象？

小编典典

如何使用jQuery将查询字符串或JSON对象映射转换为单个JSON对象？

json

对于此示例，假设我在表单中有一个月份列表，每个月份旁边都有一个复选框。我在以下两件事中寻求帮助：

转换查询字符串（例如"January=on&March=on&September=on"）或
转换对象图： [{ January: 'on' },{ March: 'on' },{ September: 'on' }]

到一个JSON对象： { January: 'on', March: 'on', September: 'on' }

我意识到第一个映射已经是JSON，但我希望它不是对象数组，而是单个JSON对象。我可以使用构建地图，$('form').serializeArray();也可以使用构建查询字符串$('form').serialize();。

jQuery API中.serialize（）的实现很简单：

serialize: function() {
    return jQuery.param(this.serializeArray());
},

这就是为什么我可以处理第一个或第二个答案的原因。

我想这样做的原因是因为我正在从PrototypeJS切换到jQuery，而在PrototypeJS中，这很简单：

Object.toJSON(Form.serializeElements($('myform'), true));

那么，是否有人知道可以轻松做到这一点的JSON插件（我想只使用jQuery），还是知道实现我想要的结果的简单方法？谢谢！

阅读 268

2020-07-27

共1个答案

小编典典

kgiannakakis提出的遍历地图的建议是一个很好的起点，尽管我不认为它有资格回答我最初的问题。经过几个小时的头部撞击后，我为此做好了准备，这使您可以基于自定义属性来序列化元素（我不想因为不得不在我的表单元素上使用’name’属性而感到满足）。我还开始使用json.org中的JSON库来对我创建的对象进行字符串化。我的插件的
serializeToJSON 函数是我一直在寻找的答案，其余只是exta。

注意：这是给客户使用的，因此将’CustomXXX’名称和属性替换为它们的实际名称

jQuery.fn.extend({
    serializeCustomPropertyArray: function() {
        return this.map(function() {
            return this.elements ? jQuery.makeArray(this.elements) : this;
        }).filter(function() {
            return jQuery(this).attr('CustomAttribute') &&
                (this.checked || /select|textarea/i.test(this.nodeName) ||
                        /text|hidden|password|search/i.test(this.type));
        }).map(function(i, elem) {
            var val = jQuery(this).val();
            return val == null ? null : jQuery.isArray(val) ?
                jQuery.map(val, function(val, i) {
                    return { name: jQuery(elem).attr('CustomAttribute'), value: val };
                }) : { name: jQuery(elem).attr('CustomAttribute'), value: val };
        }).get();
    },
    serializeToJSON: function() {
        var objectMap = this.serializeCustomPropertyArray();
        var objectJson = new Object;
        jQuery.each(objectMap, function() {
            objectJson[this.name] = (this.value !== null) ? this.value : 'null';
        });
        return JSON.stringify(objectJson);
    }
});

可以这样称呼：

$('#fields').find(':input[CustomGroup="Months"]').serializeToJSON();

假设您的文档如下所示：

<div id="fields">
   <input type="checkbox" CustomGroup="Months" CustomAttribute="January" />January<br />
   <input type="checkbox" CustomGroup="Months" CustomAttribute="February" />February<br />
   ...
</div>

构建的JSON如下所示：

{ January: 'on', February: 'on', ... }

2020-07-27