如何以簡單的方式將輸入名稱點轉換爲json格式？

我已經使用了struts json插件，並嘗試將表單數據轉換爲json格式以通過ajax提交。如何以簡單的方式將輸入名稱點轉換爲json格式？

我有兩個病例在HTML

<form> 
    <input type="text" name="user.name" value="Tom"></p> 
    <input type="text" name="user.location" value="China"></p> 
    <input type="text" name="user.data[0].id" value="993"></p> 
    <input type="text" name="user.data[0].accountId" value="123"></p> 
    <input type="text" name="user.data[1].id" value="222"></p> 
    <input type="text" name="user.data[1].accountId" value="333"></p> 
</form>

我希望是什麼把它轉換成JSON結構：

{ 
    user : { 
     name: "Tom", 
     location : "China", 
     data: [ 
     { 
      id : 993, 
      accountId : 123 
     }, 
     { 
      id : 222, 
      accountId : 333 
     } 
     ] 
    } 
}

我知道如何申報JSON數據和申報因素之一一個。

我想有更好的方式來使每個表單使用簡單的方式使用json格式，而不是以json格式逐個聲明參數。

欣賞任何建議或建議。謝謝。

來源

2017-08-25 Long Ranger

看看我的解決方案，這可能會幫助你。 – Shiladitya

你爲什麼需要它？你爲什麼不想使用標準表單？ –

前提是你的形式是完全一樣的

使用純JS方法

<form class="userform"> 
<input type="text" class="username" value="Tom"></p> 
<input type="text" class="userlocation" value="China"></p> 
<input type="text" class="userid" value="993"></p> 
<input type="text" class="useraccountid" value="123"></p> 
<input type="text" class="userid2" value="222"></p> 
<input type="text" class="useraccountid2" value="333"></p> 
</form>

隨後這些值分配給對象

var frm = document.getElementsByClassName('userform'); 

//initialize blank object and keys 
var user = {}, 
    user.name = "", 
    user.location = "", 
    user.data = []; 

//get all child input elements 
for(var i = 0; i < frm.length; i++){ 
    var uname = frm[i].getElementsByClassName('username')[0]; 
    var uloc = frm[i].getElementsByClassName('userlocation')[0]; 
    var uid = frm[i].getElementsByClassName('userid')[0]; 
    var uaccid = frm[i].getElementsByClassName('useraccountid')[0]; 
    var uid = frm[i].getElementsByClassName('userid2')[0]; 
    var uaccid = frm[i].getElementsByClassName('useraccountid2')[0]; 

    //assign values to object here 
    user[name] = {}; //assigning a parent property here, the name for example. 
    user[name].name = uname.value; 
    user[name].location = uloc.value; 
    user[name].data.push({ 
    'id': uid.value 
    'accountId': uaccid.value 
    }); 
    user[name].data.push({ 
    'id': uid2.value 
    'accountId': uaccid2.value 
    }); 
} 

JSON.stringify(user); //convert to JSON (or ignore if you want a plain object)

輸出將這個JSON格式

{ 
    user :{ 
     Tom: { 
      name: "Tom", 
      data: [ 
       { 
       id : 993, 
       accountId : 123 
       }, 
       { 
       id : 222, 
       accountId : 333 
       } 
      ] 
     }, 

     Jerry: { 
     //more data 
     }, 

     Courage: { 
     //more data 
     } 
    } 
}

希望這有助於

如果輸入字段很多，如ID3，accountid3，4，5，6，您可以通過您指定給這兩個重複字段

來源

2017-08-25 03:23:11 Merigold

感謝您的幫助，我試圖將整個表單轉換爲json格式。一個接一個地完成這將是一筆巨大的成本。你有更好的主意嗎？ –

你能否給出你想要達到的更清晰的圖像？它究竟有多大，並且都是獨特的領域還是隻有少數的重複？如果字段很多，我懷疑有沒有更好的方法來實現這一點，而不需要爲每個輸入元素設置唯一的鍵，屬性和值。您無法遍歷多個唯一字段，並期望您可以將它們中的每一個劃分爲各自的對象屬性 – Merigold

已更新的問題。預計所有的領域都是獨一無二的，每種形式只有幾個領域，但我有很多這樣的形式。這樣做對我來說是個很大的麻煩。 –

在這裏，你去的類必須循環使用jQueryhttps://jsfiddle.net/pnz8zrLx/2/

var json = {}; 
 

 
$('button').click(function(){ 
 
    $('form').each(function(i){ 
 
    json["user" + i] = {}; 
 
    json["user" + i].data = []; 
 
    var tempJSON = {}; 
 
    $('form:nth-child(' + (i+1) + ') input[type="text"]').each(function(){ 
 
     if($(this).attr('name') === 'name' || $(this).attr('name') === 'location'){ 
 
     json["user" + i][$(this).attr('name')] = $(this).val(); 
 
     } else { 
 

 
     tempJSON[$(this).attr('name')] = $(this).val(); 
 

 
     if(tempJSON != {} && $(this).attr('name') === 'accountId'){ 
 
      json["user" + i].data.push(tempJSON); 
 
      tempJSON = {}; 
 
     } 
 
     } 
 
    }); 
 
    }); 
 

 
    console.log(json); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form> 
 
    <input type="text" name="name" value="Tom"> 
 
    <input type="text" name="location" value="China"> 
 
    <input type="text" name="id" value="993"> 
 
    <input type="text" name="accountId" value="123"> 
 
    <input type="text" name="id" value="222"> 
 
    <input type="text" name="accountId" value="333"> 
 
</form> 
 

 
<form> 
 
    <input type="text" name="name" value="Test"> 
 
    <input type="text" name="location" value="Test112"> 
 
    <input type="text" name="id" value="22"> 
 
    <input type="text" name="accountId" value="78"> 
 
    <input type="text" name="id" value="00"> 
 
    <input type="text" name="accountId" value="44"> 
 
</form> 
 
<button> 
 
Submit 
 
</button>

希望的解決方案，這將幫助你。

來源

2017-08-25 04:05:21 Shiladitya

如何以簡單的方式將輸入名稱點轉換爲json格式？

回答

相關問題