Question

我在基于多个html表单输入创建多维json时遇到了一些麻烦：

html输入：

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

以下是javascript代码：

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

这是我得到的json：

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

我需要的是在'标题'之后，我想创建一个数据对象并将其他所有内容添加为'数据'的子级别，如下所示：

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

感谢任何帮助。

感谢，

Answer 1

以下是我解决问题的方法：

＆＃13;

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());

＆＃13;

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

＆＃13;

重要的是要注意，从表单访问数据的正确方法是在实际元素上使用.serialize（），但是要求在自定义＆＃34;数据中添加表单部分的特殊要求＃34;这种方法的对象还需要额外的操作。

JSBIN DEMO

Answer 2

下面的代码给出了您想要的输出。试试这个。

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>

Answer 3

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 4

也许解决方案已经在以前的答案之一，但是当我坐在火车上没有别的事可做时，我把以下最小的解决方案放在一起：

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

这可以进入$(function( ... )}部分或由某些点击事件触发。我目前正在处理页面上第一个<form>元素内的所有输入。您可以根据自己的需要进行更改。

如何在JavaScript中基于HTML输入创建JSON？

4 个答案: