dynamically creating the content of array in order to convert json type

Question

I am working on html and jquery. my agenda is to send form data through ajax in json type in an expected json format. I am new Json nested format

i have the values from form in an array

<table class="table" id="tableval">
<thead>
<tr>
<th>Topic</th>
<th>No. of Questions</th>
<th>Marks</th>
<th>Action</th>
</tr>
</thead>
<tbody id="level1topic">
<!--Dynamicaly adding row here-->
</tbody>
</table>
<br />
<td><button style="float:left; margin-right:90px; padding-top: 2px;padding-bottom: 2px"  class="label label-success level1addrow">ADD TOPIC</button></td>
<br />

Jquery to append the rows dynamically

$(document).ready(function(){  
var n=0;

$(document).on('click', '.level1addrow', function(){
n++;

var tempArray = [];   
var button_id = $(this).attr("id");
var  template ='<tr id="level1row'+n+'">';
template+='<td>';
template+='<input class="form-control" id="level1topic"  type="text" name="level1topic[]" placeholder="Topic name" />';
template+='<input type="hidden" name="level1topicid[]" value="'+n+'" />';
template+='</td>';
template+='<br />';
template+='<td>';
template+='<input class="form-control" id="level1no_que'+n+'" type="number" name="level1no_que[]" placeholder="Number Of questions" min="1" max="10"/>';
template+='</td>';
template+='<br />';
template+='<td>';
template+='<input class="form-control" id="level1top_mark'+n+'" type="number" name="level1top_mark[]" placeholder="Marks" min="1" max="10"/>';
template+='</td>';
template+='<br />';
template+='<td>';
template+='<span id="'+n+'"  class="label label-danger level1top_remove" data-toggle="tooltip" title="edit!"><i class="fa fa-remove" id="edittt"></i></span>&nbsp;<span  id="'+n+'" class="label label-warning"><i class="fa fa-pencil"></i></span></td>';
template+='</td>';
template+='<br />';
template+='</tr>';
template+='<br />';

template+='</div>';
template+='</div>';

var values = $("input[name='level1topic[]']")
.map(function(){return $(this).val();}).get();

$('#level1topic').append( template ); 

});

The code above is the way am getting the values dynamically for each row in a table am storing it in an array.and i have fetched all the values like below

 var level1testname=$("#level1title").text();
     alert(level1testname);
     var level1topics = $("input[name='level1topic[]']")
              .map(function(){return $(this).val();}).get();
              alert(level1topics);

              var level1topicid=$("input[name='level1topicid[]']")
              .map(function(){return $(this).val();}).get();
              alert(level1topicid);

              var level1no_que = $("input[name='level1no_que[]']")
              .map(function(){return $(this).val();}).get();
              var level1top_mark = $("input[name='level1top_mark[]']")
              .map(function(){return $(this).val();}).get();

My problem is that i have to convert all the values into a json format in an expected JSON format

JSON FORMAT

{
    "testMainSection": [
          {
            "name": "Mainsectionname",
            "topic": [
              {
                "id": "topicid1",

              },
              {
                "id": "topicid2",

              }

            ],
          }
        ],
    "topic": [
        {
          "id": "topicid1",
          "name": "topic1name"
        },
         {
          "id": "topicid2",
          "name": "topic2name"
        },


      ]
    }

fiddle

Answer 1

I'm not sure you've got the right JSON format shown here, it's a bit oddly laid out. This might get you started.

$('#button').click(function() {

  var mainsectioname = $("input[name='mainsectionname']").val(),
    topicnames = $("input[name='topicname']").val().split(','),
    topicJsonArray = topicnames.map(function(x) {
      return {
        "name": x
      };
    }),
    myJson = {
      "testMainSection": [{
        "name": mainsectioname,
        "Topic": topicJsonArray
      }],
    };
    
   console.log( myJson );
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input name="mainsectionname" value="Physics" />
<input name="topicname" value="Electrodynamics,Electrophysics" />
<button id="button">Build JSON</button>