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

Question

I have used the struts json plugin and tried to convert the form data to json format to submit by ajax.

I have two cases in the 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>

What I expected is to convert it to the json structure:

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

I know how to declare the json data and declare the attributes one by one.

I would like to have the better way to make each form to be in json format using simple way rather than declaring the parameter one by one in json format.

Appreciate for any suggestion or advice. Thank you.

Answer 1

Provided your form is exactly like that

Using a plain JS approach

<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>

Then assign the values to the object

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)

Output would be this in JSON format

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

      Jerry: {
      //more data
      },

      Courage: {
      //more data
      }
   }
}

Hope this helps

If your input fields are many, like id3, accountid3, 4, 5, 6. You have to loop through the classes that you assign to these two repetitive fields