4

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,

Improve this question

4 Answers 4

Reset to default
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 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>

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

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

1 Comment

thank you. this worked. i had try the additional if then... but forgot to initialize the frmdata.data = {}
0 

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 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>
<button id="generateJson">Generate Json</button>

Improve this answer

Comments

0

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 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>

Improve this answer

5 Comments

Thank you Jino. I forgot to mention that 'image' and 'link' are dynamic and can be potentially different. Thus I did the .each function so that it would just iterate through. The only constant is 'title' input... all fields after 'title' should be within the 'data' json object.
Just run this code. Is this is the expected output that you want.
Do you want 'data' field on your JSON as an array of object?
Yes, as in {"title":"some title","data":{"image":"some image url","link":"google.com"}} so that i can later call this as data['image']... but not {"title":"some title","data":[{"image":"some image url","link":"google.com"}]} as this becomes data[0]['image']
Now I had just edited my answer. Now the JSON is in the format below {"title":"some title","Data":[{"Image":"some image url","Link":"google.com"}]}. Is this is the output that you want?.
0

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.

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.