2013-03-22 43 views
1

我有以下格式的表格(只有表单的部分)构建JSON对象从形式

<input type="text" name="Journal[data][serviceaddress][company]" value="{{company}}"/> 
<input type="text" name="Journal[data][serviceaddress][address]" value="{{address}}"/> 
<input type="text" name="Journal[data][serviceaddress][zip]" value="{{zip}}"/> 
<textarea name="Journal[data][serviceaddress][notes]">{{notes}}</textarea> 
<input type="text" name="Journal[rows][1][title]"/> 
<input type="text" name="Journal[rows][1][body]"/> 
<input type="text" name="Journal[rows][2][title]"/> 
<input type="text" name="Journal[rows][2][body]"/> 

我想将其转换为以下JSON对象

{ 
    data:{ 
     serviceaddress:{ 
      company: "companyvalue", 
      address: "addressvalue", 
      zip: "zipvalue", 
      notes: "notesvalue" 
     } 
    }, 
    rows:{ 
     1:{ 
      title: "row1title", 
      body: "row1body" 
     }, 
     2:{ 
      title: "row2title", 
      body: "row2body" 
     } 
    } 
} 

这将是最好的方式来做到这一点?我想,我一定是人谁已经这样做,但我发现在搜索时是人想输入的名称为重点,而不是嵌套的JSON数据...

+0

你想这样做在客户端或服务器端? – Ares 2013-03-22 06:41:37

+0

假设你想这样做在JQuery中,检出连载API - http://api.jquery.com/serialize/。这可能会帮助你。 – ryadavilli 2013-03-22 06:42:23

+0

jQuery有form.serializeArray()来... – karaxuna 2013-03-22 06:44:02

回答

1

因为我无法找到任何现有的我发现是一个令人满意的解决方案,我创建了自己,在这里它是

function getData(){ 
      var data = {}; 
      $('.data input,.data textarea').each(function(){ 
       var val = $(this).val(); 
       var namestr = $(this).attr('name').substr(8); 
       namestr = namestr.substring(0,namestr.length-1); 
       var namearray = namestr.split(']['); 

       var currentlevel = data; 
       if (namearray[0] == 'data'){ 
        namearray = namearray.splice(1,namearray.length); 
        for (var i=0;i < namearray.length;i++){ 
         if (currentlevel[namearray[i]] == undefined && i != namearray.length-1){ 
          currentlevel[namearray[i]] = {}; 
         } 
         else if (namearray.length-1 == i){ 
          currentlevel[namearray[i]] = val; 
          break; 
         } //In the end, put a value 
         currentlevel = currentlevel[namearray[i]] 
        } 
       } 
      }); 
      return data; 
     } 

正如你所看到的,这只是着眼于输入/ textarea的标签,其中,名称中的第一个“阵列”参数是“数据”,也就是说,它只会解析名称格式为“Myform [data] [value1]”的字段。这可以很容易地修改为您自己的需要。