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

Question

在这个例子中，假设我有一个形式月份列表，每个旁边的复选框。我在寻找帮助做任何的两件事情：

1. 转换查询字符串（如"January=on&March=on&September=on"）或
2. 转换被摄体映像：[{ 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），可以轻松做到这一点，或知道一个简单的方法来实现我期待的结果？谢谢！

Answer 1

kgiannakakis的建议，遍历地图是一个很好的起点，但我不认为它有资格作为一个答案，我原来的问题。一对夫妇的撞头几个小时之后，我在这一点，它可以用来序列基于自定义属性的元素（我不想满足于不必使用“name”属性上我的表单元素，jQuery的需要）。我也开始使用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', ... } 

Answer 2

可以使用$.each效用函数遍历对象映射。

$(function() { 
    map = [{ January: 'on' },{ March: 'on' },{ September: 'on' }]; 
    $.each(map, function() { 
     $.each(this, function(key, val) {alert(key + " = " + val);});; 
    }); 
}); 

第一个让你获得所有数组对象。随着第二个你可以得到你的对象的关键和价值。

Answer 3

我知道你试图把一个查询字符串转换成JSON对象，但也许你可能会感兴趣的，直接从一个HTML表单将一个JSON对象（而不必指定真正复杂的名称属性）。如果是这样，请查看JSONForms： http://code.google.com/p/jsonf/

声明：我开始了jsonforms项目。它还很年轻，但我个人认为它很有趣！

Answer 4

你可以试试这个

String.prototype.QueryStringToJSON = function() { 
href = this; 
qStr = href.replace(/(.*?\?)/, ''); 
qArr = qStr.split('&'); 
stack = {}; 
for (var i in qArr) { 
    var a = qArr[i].split('='); 
    var name = a[0], 
     value = isNaN(a[1]) ? a[1] : parseFloat(a[1]); 
    if (name.match(/(.*?)\[(.*?)]/)) { 
     name = RegExp.$1; 
     name2 = RegExp.$2; 
     //alert(RegExp.$2) 
     if (name2) { 
      if (!(name in stack)) { 
       stack[name] = {}; 
      } 
      stack[name][name2] = value; 
     } else { 
      if (!(name in stack)) { 
       stack[name] = []; 
      } 
      stack[name].push(value); 
     } 
    } else { 
     stack[name] = value; 
    } 
} 
return stack; 
} 

查询字符串

href="j.html?name=nayan&age=29&salary=20000&interest[]=php&interest[]=jquery&interest[1]=python&interest[2]=Csharp&fan[friend]=rangan&fan[family]=sujan&sports[1]=cricket&sports[2]=football"; 

使用

alert(href.QueryStringToJSON().toSource()) 

输出

({name:"nayan", age:29, salary:20000, interest:["php", "python", "Csharp"], fan:{friend:"rangan", family:"sujan"}, sports:{1:"cricket", 2:"football"}}) 

Answer 5

您还可以使用parseQuery plugin从序列化元素创建一个对象。

var contact = $.parseQuery($("#step1 *").serialize());