如何以简单的方式将输入名称点转换为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格式？

回答

相关问题