如何使用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());