2013-03-22 84 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]」的字段。這可以很容易地修改爲您自己的需要。