How to create a JSON based on HTML inputs in JavaScript?

Question

I am having some trouble creating a multi dimension json based on multiple html form inputs:

the html inputs:

<div class="form-group-attached m-b-10">
<div class="form-group form-group-default input-group required">
<div class="form-input-group">
<label for="title">title</label>                      
<input type="text" name="title" value="some title" class="form-control">
</div>
</div>
</div>
<div class="form-group-attached m-b-10">
<div class="form-group form-group-default input-group required">
<div class="tile-icon input-group-addon d-flex">
<i class="fa-2x fa-color far fa-image"></i>                    </div>
<div class="form-input-group">
<label for="image">Image URL</label>                      
<input type="text" name="image" value="some image url" class="form-control">
</div>
</div>
<div class="form-group form-group-default input-group required">
<div class="tile-icon input-group-addon d-flex">
<i class="fa-2x fa-color far fa-link"></i>                    </div>
<div class="form-input-group">
<label for="link">Link URL</label>                      
<input type="text" name="link" value="http://www.google.com" class="form-control">
</div>
</div>
</div>

Here is the javascript code:

var frmData = {};
$(':input').each(function(){   
   frmData[$(this).attr('name')] = $(this).val();
});
alert(JSON.stringify(frmData));

Here is the json what I am getting:

{"title":"some title","image":"some image url","link":"http://www.google.com"}

What I need instead is after 'title', I would like to create a data object and add everything else as an sub level of 'data' like so:

{"title":"some title","data":{"image":"some image url","link":"http://www.google.com"}}

any help is appreciated.

thank,

Answer 1

Here is the way I would solve it:

 var inputToJson = function() { var formData = {}; formData.data = {}; $('input').each(function( index ) { if($( this ).attr('name')=="title") { formData[$( this ).attr('name')] = $( this ).val(); } else { formData["data"][$(this).attr('name')] = $( this ).val(); } }); return formData; } console.log(inputToJson()); 

 <script src="https://code.jquery.com/jquery-3.1.0.js"></script><div class="form-group-attached mb-10"> <div class="form-group form-group-default input-group required"> <div class="form-input-group"> <label for="title">title</label> <input type="text" name="title" value="some title" class="form-control"> </div> </div> </div> <div class="form-group-attached mb-10"> <div class="form-group form-group-default input-group required"> <div class="tile-icon input-group-addon d-flex"> <i class="fa-2x fa-color far fa-image"></i> </div> <div class="form-input-group"> <label for="image">Image URL</label> <input type="text" name="image" value="some image url" class="form-control"> </div> </div> <div class="form-group form-group-default input-group required"> <div class="tile-icon input-group-addon d-flex"> <i class="fa-2x fa-color far fa-link"></i> </div> <div class="form-input-group"> <label for="link">Link URL</label> <input type="text" name="link" value="http://www.google.com" class="form-control"> </div> </div> </div> 

It's important to note that the proper way to access data from a form is using .serialize() on the actual element but given the special requirement of augmenting parts of the form within a custom "data" object that approach would also require additional manipulation.

JSBIN DEMO

Answer 2

The code below gives the output that you want. Just go through that.

 var frmData = {}; var frmDataImageArray = []; var frmDataTitle; var frmDataImage; var frmDataLink; $(':input').each(function(){ if($(this).attr('name')=='image') frmDataImage=$(this).val(); else if($(this).attr('name')=='link') { //Here i assume that link is the last control in this form that's why i put this code here. So that title and image is fetched before entering into this statement frmDataLink=$(this).val(); frmDataImageArray.push({"Image":frmDataImage,"Link":frmDataLink}); //frmData={"title":frmDataTitle,"Data":{"Image":frmDataImage,"Link":frmDataLink}}; } else frmDataTitle=$(this).val(); //frmData[$(this).attr('name')] = $(this).val(); }); frmData={"title":frmDataTitle,"Data":frmDataImageArray}; console.log(JSON.stringify(frmData)); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="form-group-attached mb-10"> <div class="form-group form-group-default input-group required"> <div class="form-input-group"> <label for="title">title</label> <input type="text" name="title" value="some title" class="form-control"> </div> </div> </div> <div class="form-group-attached mb-10"> <div class="form-group form-group-default input-group required"> <div class="tile-icon input-group-addon d-flex"> <i class="fa-2x fa-color far fa-image"></i> </div> <div class="form-input-group"> <label for="image">Image URL</label> <input type="text" name="image" value="some image url" class="form-control"> </div> </div> <div class="form-group form-group-default input-group required"> <div class="tile-icon input-group-addon d-flex"> <i class="fa-2x fa-color far fa-link"></i> </div> <div class="form-input-group"> <label for="link">Link URL</label> <input type="text" name="link" value="http://www.google.com" class="form-control"> </div> </div> </div> 

Answer 3

 var arr = []; var frmData = {}; var Title; var Image; var Link; $(':input').each(function() { if ($(this).attr('name') == 'image') Image = $(this).val(); else if ($(this).attr('name') == 'link') { Link = $(this).val(); frmData = { "title": Title, "Data": { "Image": Image, "Link": Link } }; arr.push(frmData) } else Title = $(this).val(); }); console.log(JSON.stringify(frmData));//json format console.log(arr);//arr fomat 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="form-group-attached mb-10"> <div class="form-group form-group-default input-group required"> <div class="form-input-group"> <label for="title">title</label> <input type="text" name="title" value="some title" class="form-control"> </div> </div> </div> <div class="form-group-attached mb-10"> <div class="form-group form-group-default input-group required"> <div class="tile-icon input-group-addon d-flex"> <i class="fa-2x fa-color far fa-image"></i> </div> <div class="form-input-group"> <label for="image">Image URL</label> <input type="text" name="image" value="some image url" class="form-control"> </div> </div> <div class="form-group form-group-default input-group required"> <div class="tile-icon input-group-addon d-flex"> <i class="fa-2x fa-color far fa-link"></i> </div> <div class="form-input-group"> <label for="link">Link URL</label> <input type="text" name="link" value="http://www.google.com" class="form-control"> </div> </div> </div> <button id="generateJson">Generate Json</button> 

Answer 4

Maybe the solution is already in one of the previous answers, but as I am sitting in a train with nothing else to do I put together the following minimal solution:

var jsn={data:{}};
$('input','form:first').each(function(i,o){
  var na=$(o).attr('name');
  (na=='title'?jsn:jsn.data)[na]=o.value;
});

This can go into the $(function( ... )} section or be triggered by some click event. I am currently treating all inputs within the first <form> element on the page. You can change that to suit your needs.