Form data into json format

Question

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 ?

Possible duplicate of [Convert form data to JavaScript object with jQuery](https://stackoverflow.com/questions/1184624/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](https://stackoverflow.com/questions/3010840/loop-through-an-array-in-javascript) — 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

Mahdi Khalili · Answer 1 · 2019-01-02T10:51:00.823

0

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 02 '19 at 10:51

answered Dec 31 '18 at 11:14

Mahdi Khalili

1,025
15
32

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 01 '19 at 05:09

Form data into json format

1 Answers1