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

2024年1月2日 224次阅读

我在基于多个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’之后,我想创建一个数据对象并将其他所有内容添加为’data’的子级别,如下所示：

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

任何帮助表示赞赏.

谢谢,

最佳答案 这是我解决它的方式：

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>

重要的是要注意,从表单访问数据的正确方法是在实际元素上使用.serialize(),但是考虑到在自定义“数据”对象中扩充表单部分的特殊要求,该方法还需要额外的操作.

JSBIN DEMO

点赞