Form data into json format
I have a form where I can add multiple form by clicking on plus button.In which I can add multiple rows by clicking on plus button next to row. Now I want to get this form data into json format. I give the form input name in array like
name="request[0]['testSectionHeader']"
name="request[0]['sortOrder']"
below is my form,
click here to see my form
so when I am clicking on save button it is not giving me proper result
my coming result is
{
"request[0]['testSectionHeader']":"test selection header",
"request[0]['sortOrder']":"1",
"request[0]['level2'][0]['testBlockHeader']":"asdf",
"request[0]['level2'][0]['sortOrder']":"1",
"request[0]['level2'][0]['level3'][0]['designation']":"Test Condition",
"request[0]['level2'][0]['level3'][0]['size']":"Test",
"request[0]['level2'][0]['level3'][0]['condition']":"=",
"request[0]['level2'][0]['level3'][0]['volume']":"23.6",
"request[0]['level2'][0]['level3'][0]['unit']":"C",
"request[0]['level2'][0]['level3'][0]['remark']":"U6",
"request[0]['level2'][0]['level3'][0]['interface']":"test interface1"
}
but I need like this
{
"request": [
{
"testSectionHeader": "Section Header 1",
"sortOrder": "1",
"level2": [
{
"testBlockHeader": "Section Header 1 Block1",
"sortOrder": "1",
"level3": [
{
"designation": "Software engineer",
"unit": "5",
"sortOrder": "1"
},
{
"designation": "QA Manager",
"unit": "5",
"sortOrder": "2"
}
]
}
]
},
]
}
So can you please help me how can I create it, should I need to change input name or anything need to change. this is very important for me. Thanks in advance.
My code is,
$(document).ready(function(){
$('#dataform').on('submit', function(e){
e.preventDefault();
var data = {};
$("#dataform").serializeArray().map(function(x){
data[x.name] = x.value;
});
alert(JSON.stringify(data));
});
});
I have checked on google about my problem and try to make it like i want. but not possible you can check my below code. I don't know where is my fault.
Is there anyone who can help me ?
javascript jquery json forms
add a comment |
I have a form where I can add multiple form by clicking on plus button.In which I can add multiple rows by clicking on plus button next to row. Now I want to get this form data into json format. I give the form input name in array like
name="request[0]['testSectionHeader']"
name="request[0]['sortOrder']"
below is my form,
click here to see my form
so when I am clicking on save button it is not giving me proper result
my coming result is
{
"request[0]['testSectionHeader']":"test selection header",
"request[0]['sortOrder']":"1",
"request[0]['level2'][0]['testBlockHeader']":"asdf",
"request[0]['level2'][0]['sortOrder']":"1",
"request[0]['level2'][0]['level3'][0]['designation']":"Test Condition",
"request[0]['level2'][0]['level3'][0]['size']":"Test",
"request[0]['level2'][0]['level3'][0]['condition']":"=",
"request[0]['level2'][0]['level3'][0]['volume']":"23.6",
"request[0]['level2'][0]['level3'][0]['unit']":"C",
"request[0]['level2'][0]['level3'][0]['remark']":"U6",
"request[0]['level2'][0]['level3'][0]['interface']":"test interface1"
}
but I need like this
{
"request": [
{
"testSectionHeader": "Section Header 1",
"sortOrder": "1",
"level2": [
{
"testBlockHeader": "Section Header 1 Block1",
"sortOrder": "1",
"level3": [
{
"designation": "Software engineer",
"unit": "5",
"sortOrder": "1"
},
{
"designation": "QA Manager",
"unit": "5",
"sortOrder": "2"
}
]
}
]
},
]
}
So can you please help me how can I create it, should I need to change input name or anything need to change. this is very important for me. Thanks in advance.
My code is,
$(document).ready(function(){
$('#dataform').on('submit', function(e){
e.preventDefault();
var data = {};
$("#dataform").serializeArray().map(function(x){
data[x.name] = x.value;
});
alert(JSON.stringify(data));
});
});
I have checked on google about my problem and try to make it like i want. but not possible you can check my below code. I don't know where is my fault.
Is there anyone who can help me ?
javascript jquery json forms
1
Minimal, Complete, and Verifiable example ...........
– bambam
Dec 31 '18 at 10:25
1
Possible duplicate of Convert form data to JavaScript object with jQuery
– Liam
Dec 31 '18 at 10:26
No, I already checked this link but i did not any solution, You can check my code.
– Indresh Tayal
Dec 31 '18 at 10:39
It's a simple case of manipulating the data. There is no magic call that's going to turn your array into a random object, your simply going to have to write the code yourself. Try it, it's really not very difficult. Here's a starting point
– Liam
Dec 31 '18 at 10:41
I tried many times but i did not get like i want. can you please help me?? what i need to change in my code??
– Indresh Tayal
Dec 31 '18 at 10:53
add a comment |
I have a form where I can add multiple form by clicking on plus button.In which I can add multiple rows by clicking on plus button next to row. Now I want to get this form data into json format. I give the form input name in array like
name="request[0]['testSectionHeader']"
name="request[0]['sortOrder']"
below is my form,
click here to see my form
so when I am clicking on save button it is not giving me proper result
my coming result is
{
"request[0]['testSectionHeader']":"test selection header",
"request[0]['sortOrder']":"1",
"request[0]['level2'][0]['testBlockHeader']":"asdf",
"request[0]['level2'][0]['sortOrder']":"1",
"request[0]['level2'][0]['level3'][0]['designation']":"Test Condition",
"request[0]['level2'][0]['level3'][0]['size']":"Test",
"request[0]['level2'][0]['level3'][0]['condition']":"=",
"request[0]['level2'][0]['level3'][0]['volume']":"23.6",
"request[0]['level2'][0]['level3'][0]['unit']":"C",
"request[0]['level2'][0]['level3'][0]['remark']":"U6",
"request[0]['level2'][0]['level3'][0]['interface']":"test interface1"
}
but I need like this
{
"request": [
{
"testSectionHeader": "Section Header 1",
"sortOrder": "1",
"level2": [
{
"testBlockHeader": "Section Header 1 Block1",
"sortOrder": "1",
"level3": [
{
"designation": "Software engineer",
"unit": "5",
"sortOrder": "1"
},
{
"designation": "QA Manager",
"unit": "5",
"sortOrder": "2"
}
]
}
]
},
]
}
So can you please help me how can I create it, should I need to change input name or anything need to change. this is very important for me. Thanks in advance.
My code is,
$(document).ready(function(){
$('#dataform').on('submit', function(e){
e.preventDefault();
var data = {};
$("#dataform").serializeArray().map(function(x){
data[x.name] = x.value;
});
alert(JSON.stringify(data));
});
});
I have checked on google about my problem and try to make it like i want. but not possible you can check my below code. I don't know where is my fault.
Is there anyone who can help me ?
javascript jquery json forms
I have a form where I can add multiple form by clicking on plus button.In which I can add multiple rows by clicking on plus button next to row. Now I want to get this form data into json format. I give the form input name in array like
name="request[0]['testSectionHeader']"
name="request[0]['sortOrder']"
below is my form,
click here to see my form
so when I am clicking on save button it is not giving me proper result
my coming result is
{
"request[0]['testSectionHeader']":"test selection header",
"request[0]['sortOrder']":"1",
"request[0]['level2'][0]['testBlockHeader']":"asdf",
"request[0]['level2'][0]['sortOrder']":"1",
"request[0]['level2'][0]['level3'][0]['designation']":"Test Condition",
"request[0]['level2'][0]['level3'][0]['size']":"Test",
"request[0]['level2'][0]['level3'][0]['condition']":"=",
"request[0]['level2'][0]['level3'][0]['volume']":"23.6",
"request[0]['level2'][0]['level3'][0]['unit']":"C",
"request[0]['level2'][0]['level3'][0]['remark']":"U6",
"request[0]['level2'][0]['level3'][0]['interface']":"test interface1"
}
but I need like this
{
"request": [
{
"testSectionHeader": "Section Header 1",
"sortOrder": "1",
"level2": [
{
"testBlockHeader": "Section Header 1 Block1",
"sortOrder": "1",
"level3": [
{
"designation": "Software engineer",
"unit": "5",
"sortOrder": "1"
},
{
"designation": "QA Manager",
"unit": "5",
"sortOrder": "2"
}
]
}
]
},
]
}
So can you please help me how can I create it, should I need to change input name or anything need to change. this is very important for me. Thanks in advance.
My code is,
$(document).ready(function(){
$('#dataform').on('submit', function(e){
e.preventDefault();
var data = {};
$("#dataform").serializeArray().map(function(x){
data[x.name] = x.value;
});
alert(JSON.stringify(data));
});
});
I have checked on google about my problem and try to make it like i want. but not possible you can check my below code. I don't know where is my fault.
Is there anyone who can help me ?
javascript jquery json forms
javascript jquery json forms
edited Dec 31 '18 at 10:38
Indresh Tayal
asked Dec 31 '18 at 10:06
Indresh TayalIndresh Tayal
66
66
1
Minimal, Complete, and Verifiable example ...........
– bambam
Dec 31 '18 at 10:25
1
Possible duplicate of Convert form data to JavaScript object with jQuery
– Liam
Dec 31 '18 at 10:26
No, I already checked this link but i did not any solution, You can check my code.
– Indresh Tayal
Dec 31 '18 at 10:39
It's a simple case of manipulating the data. There is no magic call that's going to turn your array into a random object, your simply going to have to write the code yourself. Try it, it's really not very difficult. Here's a starting point
– Liam
Dec 31 '18 at 10:41
I tried many times but i did not get like i want. can you please help me?? what i need to change in my code??
– Indresh Tayal
Dec 31 '18 at 10:53
add a comment |
1
Minimal, Complete, and Verifiable example ...........
– bambam
Dec 31 '18 at 10:25
1
Possible duplicate of Convert form data to JavaScript object with jQuery
– Liam
Dec 31 '18 at 10:26
No, I already checked this link but i did not any solution, You can check my code.
– Indresh Tayal
Dec 31 '18 at 10:39
It's a simple case of manipulating the data. There is no magic call that's going to turn your array into a random object, your simply going to have to write the code yourself. Try it, it's really not very difficult. Here's a starting point
– Liam
Dec 31 '18 at 10:41
I tried many times but i did not get like i want. can you please help me?? what i need to change in my code??
– Indresh Tayal
Dec 31 '18 at 10:53
1
1
Minimal, Complete, and Verifiable example ...........
– bambam
Dec 31 '18 at 10:25
Minimal, Complete, and Verifiable example ...........
– bambam
Dec 31 '18 at 10:25
1
1
Possible duplicate of Convert form data to JavaScript object with jQuery
– Liam
Dec 31 '18 at 10:26
Possible duplicate of Convert form data to JavaScript object with jQuery
– Liam
Dec 31 '18 at 10:26
No, I already checked this link but i did not any solution, You can check my code.
– Indresh Tayal
Dec 31 '18 at 10:39
No, I already checked this link but i did not any solution, You can check my code.
– Indresh Tayal
Dec 31 '18 at 10:39
It's a simple case of manipulating the data. There is no magic call that's going to turn your array into a random object, your simply going to have to write the code yourself. Try it, it's really not very difficult. Here's a starting point
– Liam
Dec 31 '18 at 10:41
It's a simple case of manipulating the data. There is no magic call that's going to turn your array into a random object, your simply going to have to write the code yourself. Try it, it's really not very difficult. Here's a starting point
– Liam
Dec 31 '18 at 10:41
I tried many times but i did not get like i want. can you please help me?? what i need to change in my code??
– Indresh Tayal
Dec 31 '18 at 10:53
I tried many times but i did not get like i want. can you please help me?? what i need to change in my code??
– Indresh Tayal
Dec 31 '18 at 10:53
add a comment |
1 Answer
1
active
oldest
votes
instead of using JSON.stringify() you should use for loops to create your JSON array
var _json = {}
var _requests =
var _levels =
for(var i =0;i<requests.length ;i++){
var tempRequest ;
// tempRequest = {"sortOrder": intvalue} and bla bla bla
//sortOrder
//testSectionHeader
for(var j = 0;j<levels.length;j++){
var tempLevel;
// tempLevel = {"size":"value"} and bla bla bla
//designation
//size
//condition
//volume
//unit
//remark
//interface
_levels.push(tempLevel)
}
tempRequest.levels = _levels
_requests.push(tempRequest)
}
_json = JSON.stringify(_requests) //here you got your json
this is just an example , you could change it as you want
update :
java script array length - if you have an array of request you can access to its length arrayname.length
Thanks for reply. let me try like that
– Indresh Tayal
Dec 31 '18 at 11:42
Can you please explain more . like requests.length how can i get it??
– Indresh Tayal
Dec 31 '18 at 12:54
Actually i am new in jquery so that
– Indresh Tayal
Dec 31 '18 at 12:56
its pure JavaScript and i didnt use any JQuery in my code , i updated my answer its so simple you have two arrays requests and levels which you need to create a json from them and as far as i understood you need levels inside requests , you need 1 for to loop through requests and another inside that to loop through the levels and adding them into requests then make request array a json
– Mahdi Khalili
Jan 1 at 5:09
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53986149%2fform-data-into-json-format%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
instead of using JSON.stringify() you should use for loops to create your JSON array
var _json = {}
var _requests =
var _levels =
for(var i =0;i<requests.length ;i++){
var tempRequest ;
// tempRequest = {"sortOrder": intvalue} and bla bla bla
//sortOrder
//testSectionHeader
for(var j = 0;j<levels.length;j++){
var tempLevel;
// tempLevel = {"size":"value"} and bla bla bla
//designation
//size
//condition
//volume
//unit
//remark
//interface
_levels.push(tempLevel)
}
tempRequest.levels = _levels
_requests.push(tempRequest)
}
_json = JSON.stringify(_requests) //here you got your json
this is just an example , you could change it as you want
update :
java script array length - if you have an array of request you can access to its length arrayname.length
Thanks for reply. let me try like that
– Indresh Tayal
Dec 31 '18 at 11:42
Can you please explain more . like requests.length how can i get it??
– Indresh Tayal
Dec 31 '18 at 12:54
Actually i am new in jquery so that
– Indresh Tayal
Dec 31 '18 at 12:56
its pure JavaScript and i didnt use any JQuery in my code , i updated my answer its so simple you have two arrays requests and levels which you need to create a json from them and as far as i understood you need levels inside requests , you need 1 for to loop through requests and another inside that to loop through the levels and adding them into requests then make request array a json
– Mahdi Khalili
Jan 1 at 5:09
add a comment |
instead of using JSON.stringify() you should use for loops to create your JSON array
var _json = {}
var _requests =
var _levels =
for(var i =0;i<requests.length ;i++){
var tempRequest ;
// tempRequest = {"sortOrder": intvalue} and bla bla bla
//sortOrder
//testSectionHeader
for(var j = 0;j<levels.length;j++){
var tempLevel;
// tempLevel = {"size":"value"} and bla bla bla
//designation
//size
//condition
//volume
//unit
//remark
//interface
_levels.push(tempLevel)
}
tempRequest.levels = _levels
_requests.push(tempRequest)
}
_json = JSON.stringify(_requests) //here you got your json
this is just an example , you could change it as you want
update :
java script array length - if you have an array of request you can access to its length arrayname.length
Thanks for reply. let me try like that
– Indresh Tayal
Dec 31 '18 at 11:42
Can you please explain more . like requests.length how can i get it??
– Indresh Tayal
Dec 31 '18 at 12:54
Actually i am new in jquery so that
– Indresh Tayal
Dec 31 '18 at 12:56
its pure JavaScript and i didnt use any JQuery in my code , i updated my answer its so simple you have two arrays requests and levels which you need to create a json from them and as far as i understood you need levels inside requests , you need 1 for to loop through requests and another inside that to loop through the levels and adding them into requests then make request array a json
– Mahdi Khalili
Jan 1 at 5:09
add a comment |
instead of using JSON.stringify() you should use for loops to create your JSON array
var _json = {}
var _requests =
var _levels =
for(var i =0;i<requests.length ;i++){
var tempRequest ;
// tempRequest = {"sortOrder": intvalue} and bla bla bla
//sortOrder
//testSectionHeader
for(var j = 0;j<levels.length;j++){
var tempLevel;
// tempLevel = {"size":"value"} and bla bla bla
//designation
//size
//condition
//volume
//unit
//remark
//interface
_levels.push(tempLevel)
}
tempRequest.levels = _levels
_requests.push(tempRequest)
}
_json = JSON.stringify(_requests) //here you got your json
this is just an example , you could change it as you want
update :
java script array length - if you have an array of request you can access to its length arrayname.length
instead of using JSON.stringify() you should use for loops to create your JSON array
var _json = {}
var _requests =
var _levels =
for(var i =0;i<requests.length ;i++){
var tempRequest ;
// tempRequest = {"sortOrder": intvalue} and bla bla bla
//sortOrder
//testSectionHeader
for(var j = 0;j<levels.length;j++){
var tempLevel;
// tempLevel = {"size":"value"} and bla bla bla
//designation
//size
//condition
//volume
//unit
//remark
//interface
_levels.push(tempLevel)
}
tempRequest.levels = _levels
_requests.push(tempRequest)
}
_json = JSON.stringify(_requests) //here you got your json
this is just an example , you could change it as you want
update :
java script array length - if you have an array of request you can access to its length arrayname.length
edited Jan 2 at 10:51
answered Dec 31 '18 at 11:14
Mahdi KhaliliMahdi Khalili
11411
11411
Thanks for reply. let me try like that
– Indresh Tayal
Dec 31 '18 at 11:42
Can you please explain more . like requests.length how can i get it??
– Indresh Tayal
Dec 31 '18 at 12:54
Actually i am new in jquery so that
– Indresh Tayal
Dec 31 '18 at 12:56
its pure JavaScript and i didnt use any JQuery in my code , i updated my answer its so simple you have two arrays requests and levels which you need to create a json from them and as far as i understood you need levels inside requests , you need 1 for to loop through requests and another inside that to loop through the levels and adding them into requests then make request array a json
– Mahdi Khalili
Jan 1 at 5:09
add a comment |
Thanks for reply. let me try like that
– Indresh Tayal
Dec 31 '18 at 11:42
Can you please explain more . like requests.length how can i get it??
– Indresh Tayal
Dec 31 '18 at 12:54
Actually i am new in jquery so that
– Indresh Tayal
Dec 31 '18 at 12:56
its pure JavaScript and i didnt use any JQuery in my code , i updated my answer its so simple you have two arrays requests and levels which you need to create a json from them and as far as i understood you need levels inside requests , you need 1 for to loop through requests and another inside that to loop through the levels and adding them into requests then make request array a json
– Mahdi Khalili
Jan 1 at 5:09
Thanks for reply. let me try like that
– Indresh Tayal
Dec 31 '18 at 11:42
Thanks for reply. let me try like that
– Indresh Tayal
Dec 31 '18 at 11:42
Can you please explain more . like requests.length how can i get it??
– Indresh Tayal
Dec 31 '18 at 12:54
Can you please explain more . like requests.length how can i get it??
– Indresh Tayal
Dec 31 '18 at 12:54
Actually i am new in jquery so that
– Indresh Tayal
Dec 31 '18 at 12:56
Actually i am new in jquery so that
– Indresh Tayal
Dec 31 '18 at 12:56
its pure JavaScript and i didnt use any JQuery in my code , i updated my answer its so simple you have two arrays requests and levels which you need to create a json from them and as far as i understood you need levels inside requests , you need 1 for to loop through requests and another inside that to loop through the levels and adding them into requests then make request array a json
– Mahdi Khalili
Jan 1 at 5:09
its pure JavaScript and i didnt use any JQuery in my code , i updated my answer its so simple you have two arrays requests and levels which you need to create a json from them and as far as i understood you need levels inside requests , you need 1 for to loop through requests and another inside that to loop through the levels and adding them into requests then make request array a json
– Mahdi Khalili
Jan 1 at 5:09
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53986149%2fform-data-into-json-format%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown

1
Minimal, Complete, and Verifiable example ...........
– bambam
Dec 31 '18 at 10:25
1
Possible duplicate of Convert form data to JavaScript object with jQuery
– Liam
Dec 31 '18 at 10:26
No, I already checked this link but i did not any solution, You can check my code.
– Indresh Tayal
Dec 31 '18 at 10:39
It's a simple case of manipulating the data. There is no magic call that's going to turn your array into a random object, your simply going to have to write the code yourself. Try it, it's really not very difficult. Here's a starting point
– Liam
Dec 31 '18 at 10:41
I tried many times but i did not get like i want. can you please help me?? what i need to change in my code??
– Indresh Tayal
Dec 31 '18 at 10:53