Parse form to JSON object using JQuery and considering sub – JSON object

Question

I am trying to extract from data for submitting it , for this I have used jquery serializeArray() function . Which works very nicely and gives output as array of { name : value } object . This name is similar as what I have given in form for each element . But I want few fields(names) in side sub document . For an example

HTML

<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
<form class="login">
    <label for="_user_name">username:</label>
    <input type="text" id="_user_name" name="user.name" value="dev.pus" />
    <label for="_user_pass">password:</label>
    <input type="password" id="_user_pass" name="user.pass" value="1234" />
    <button type="submit">login</button>
</form>
</body>
</html>

JavaScript

var docFormParams = $("form.login"),
         docData = docFormParams.serializeArray();


var finalJson ={};

 for (var i = 0; i < docData.length; i++) {
     finalJson[docData[i].name] = docData[i].value;

 }

console.log(JSON.parse(JSON.stringify(finalJson)));

Output

[object Object] {
  user.name: "dev.pus",
  user.pass: "1234"
}
finalJson
[object Object] {
  user.name: "dev.pus",
  user.pass: "1234"
}
finalJson.user
undefined
[object Object] {
  user.name: "dev.pus",
  user.pass: "1234"
}

Output which I want :

{
user :{name :"dev.pus",
       pass :"1234"

      }    
}

As you can see i have tried putting dot in name , but it doesn't work . Any approach to fix this ? Thanks

sergolius · Accepted Answer · 2014-12-01 10:45:29Z

1

$("form.login").serializeArray();

will return an array:

[{"name":"user.name","value":"dev.pus"},{"name":"user.pass","value":"1234"}]

You should "split" "name" of each element, or change "name" at inputs. Example with "split": http://jsfiddle.net/n1su1q0h/

answered Dec 1, 2014 at 10:45

sergolius

4383 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Karel Kubat · Accepted Answer · 2014-12-01 10:38:54Z

0

Try simply constructing a Javascript object by pulling the values out of the form. Then you can serialize it:

obj = { "user": { "name": $('#_user_name').val(),
                  "pass": $('#_user_pass').val()
                }
      };
alert(JSON.stringify(obj));

answered Dec 1, 2014 at 10:38

Karel Kubat

1,67511 silver badges12 bronze badges

Collectives™ on Stack Overflow

Parse form to JSON object using JQuery and considering sub – JSON object

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related