如何简单地将输入的名称点转换为json格式？

Question

我使用了strutsjson插件，尝试将表单数据转换成json格式提交给ajax。

我有两个案例在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 格式一个一个地声明参数。

感谢任何建议或建议。谢谢。

Answer 1

只要你的表格完全一样

使用普通的 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。您必须循环遍历分配给这两个重复字段的类

Answer 2

这里是使用 jQuery https://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>

希望对您有所帮助。

如何简单地将输入的名称点转换为json格式？

How to convert the input name dot to json format in simple way?

javascript

jquery

struts2

struts2-json-plugin