使用jQuery将复杂形式序列化为JSON对象 [英] Serialize complex form to JSON object using jQuery

问题描述

我一直在寻找这个小时，并没有找到答案。
请在燃烧之前仔细阅读整个问题！ ：）

我有一个类似这样的表单：

 < ; form id =sample> 
< input name =nametype =textvalue =name value/> 
 
< input name =phone [0] [type]type =textvalue =cell/> 
< input name =phone [0] [number]type =textvalue =000/> 
 
< input name =phone [1] [type]type =textvalue =home/> 
< input name =phone [1] [number]type =textvalue =111/> 
< / form> 
  

并且需要能够将其序列化为：

  {
 name：'name value'，
 
 phone：[
 {
 type：'cell '，
号码：'000'
}，
 {
类型：'home'，
号码：'111'
} 
 ] 
} 
  

我已经尝试了大多数的答案，包括jquery-json库和大部分他们返回这样的东西：

  {
'name'：'name value'，
'phone [0] [type]'：'cell'，
'phone [0] [number]'：'000'，
'phone [1] [type]'：'home'，
'phone [1] [number]'：'111'，
} 
  

这是我无法使用！ ：P

预先感谢大家。 试试这段代码我为你写了...适合我的作品，只是使用你的数据结果。您可以使用它来创建一个简单的jQuery插件...

示例需要JSON.stringify才能完全工作。

  var d = {
'name'：'name value'，
'phone [0] [type]'：'cell'，
'phone [0] [number]'：'000'，
'phone [1] [type]'：'home'，
'phone [1] [number]'：'111 '，
}; 
 
 $（document）.ready（function（）{
 
 arrangeJson（d）; 
 alert（JSON.stringify（d））; 
 }）; 
 
函数arrangeJson（data）{
 var initMatch = / ^（[a-z0-9] +？）\ [/ i; 
 var first = / ^ \ [[a-z0-9] +？\] / i; 
 var isNumber = / ^ [0-9] $ /; 
 var bracers = / [\ [\]] / g; 
 var splitter = / \] \ [| \ [| \] / g; 
 $ b $ for（var key in data）{
 if（initMatch.test（key））{
 data [key.replace（initMatch，'[$ 1] ['）] = data [key]; 
} 
 else {
 data [key.replace（/^(.+)$/,'[$ 1]'）] = data [key]; 
} 
删除数据[key]; 
 
 
 $ b $（var key in data）{
 processExpression（data，key，data [key]）; 
删除数据[key]; 
 
 
函数processExpression（dataNode，key，value）{
 var e = key.split（splitter）; 
 if（e）{
 var e2 = []; 
 for（var i = 0; i< e.length; i ++）{
 if（e [i]！==''）{e2.push（e [i]）;} 
} 
e = e2; 
 if（e.length> 1）{
 var x = e [0]; 
 var target = dataNode [x]; 
 if（！target）{
 if（isNumber.test（e [1]））{
 dataNode [x] = []; 
} 
 else {
 dataNode [x] = {} 
} 
} 
 processExpression（dataNode [x]，key.replace（first，'' '），价值）; 
} 
 else if（e.length == 1）{
 dataNode [e [0]] = value; 
} 
 else {
 alert（'This should not happen ...'）; 
} 
} 
} 
} 
  

I've been searching for hours for this and haven't found an answer. Please read through the whole question before flaming! :)

I have a form similar to this:

<form id="sample">
 <input name="name" type="text" value="name value" />

 <input name="phone[0][type]" type="text" value="cell" />
 <input name="phone[0][number]" type="text" value="000" />

 <input name="phone[1][type]" type="text" value="home" />
 <input name="phone[1][number]" type="text" value="111" />
</form>

And need to be able to serialize it to this:

{
 name: 'name value',

 phone: [
  {
   type: 'cell',
   number: '000'
  },
  {
   type: 'home',
   number: '111'
  }
 ]
}

I have tried most answers on SO including jquery-json libraries and most of them return something like this:

{
 'name': 'name value',
 'phone[0][type]': 'cell',
 'phone[0][number]': '000',
 'phone[1][type]': 'home',
 'phone[1][number]': '111',
}

This is something I cannot use! :P

Thanks everyone in advance.

解决方案

Try this code I wrote for you... Works fine for me, just using your data result. You can work on it and make a simple jQuery plugin...

The sample need JSON.stringify to work fully.

var d = {
    'name': 'name value',
    'phone[0][type]': 'cell',
    'phone[0][number]': '000',
    'phone[1][type]': 'home',
    'phone[1][number]': '111',
};

$(document).ready(function(){

    arrangeJson(d);
    alert(JSON.stringify(d));
});

function arrangeJson(data){
    var initMatch = /^([a-z0-9]+?)\[/i;
    var first = /^\[[a-z0-9]+?\]/i;
    var isNumber = /^[0-9]$/;
    var bracers = /[\[\]]/g;
    var splitter = /\]\[|\[|\]/g;

    for(var key in data) {
        if(initMatch.test(key)){
            data[key.replace(initMatch,'[$1][')] = data[key];
        }
        else{
            data[key.replace(/^(.+)$/,'[$1]')] = data[key];
        }
        delete data[key];
    }


    for (var key in data) {
        processExpression(data, key, data[key]);
        delete data[key];
    }

    function processExpression(dataNode, key, value){
        var e = key.split(splitter);
        if(e){
            var e2 =[];
            for (var i = 0; i < e.length; i++) {
                    if(e[i]!==''){e2.push(e[i]);} 
            }
            e = e2;
            if(e.length > 1){
                var x = e[0];
                var target = dataNode[x];
                if(!target){
                    if(isNumber.test(e[1])){
                        dataNode[x] = [];
                    }
                    else{
                        dataNode[x] ={}
                    }
                }
                processExpression(dataNode[x], key.replace(first,''), value);
            }
            else if(e.length == 1){
                dataNode[e[0]] = value;
            }
            else{
                alert('This should not happen...');
            }
        }
    }
}

这篇关于使用jQuery将复杂形式序列化为JSON对象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！