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

我在基于多个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>

以下是我得到的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 frmData={}；
var frmDataImageArray=[]；
var frmDataTitle；
var-frmDataImage；
var frmDataLink；
$（':input'）。每个（函数（）{
if（$（this.attr（'name'）=='image'））
frmDataImage=$（this.val（）；
else if（$（this）.attr（'name'）=='link'））
{
//在这里，我假设link是这个表单中的最后一个控件，这就是为什么我把这个代码放在这里，这样在进入这个语句之前，标题和图像就会被提取出来
frmDataLink=$（this.val（）；
push（{“Image”：frmDataImage，“Link”：frmDataLink}）；
//frmData={“title”：frmDataTitle，“Data”：{“Image”：frmDataImage，“Link”：frmDataLink}；
}
其他的
frmDataTitle=$（this.val（）；
//frmData[$（this.attr（'name'）]=$（this.val（）；
});
frmData={“标题”：frmDataTitle，“数据”：frmDataImageArray}；
log（JSON.stringify（frmData））

标题
图像URL
链接URL

var arr=[]；
var frmData={}；
var标题；
var图像；
var-Link；
$（'：input'）。每个（函数（）{
if（$（this）.attr（'name'）=='image'）
Image=$（this.val（）；
else if（$（this.attr（'name'）=='link'））{
Link=$（this.val（）；
frmData={
“头衔”：头衔，
“数据”：{
“形象”：形象，
“链接”：链接
}
};
arr.push（frmData）
}否则
Title=$（this.val（）；
});
log（JSON.stringify（frmData））//JSON格式
控制台日志（arr）//arr fomat

标题
图像URL
链接URL
生成Json
以下是我解决它的方法：


var inputOJSON=函数（）{
var formData={}；
formData.data={}；
$（'input'）。每个（函数（索引）{
if（$（this.attr（'name'）==“title”）{
formData[$（this.attr（'name'）]=$（this.val（）；
}
否则{
formData[“data”][$（this.attr（'name'）]=$（this.val（）；
}
});
返回表单数据；
}
console.log（inputOJSON（））

标题
图像URL
链接URL
也许解决方案已经出现在前面的一个答案中，但由于我坐在火车上无所事事，我总结了以下最小解决方案：

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

这可以进入
$（函数（…）}
部分或由某个单击事件触发。我目前正在处理页面上第一个
元素中的所有输入。您可以根据需要进行更改。
谢谢您，基诺。我忘了提到“图像”和“链接”是动态的，可能会有所不同。因此，我对每个函数进行了处理，以便它只进行迭代通过。唯一的常量是“title”输入…在“title”之后的所有字段都应该在“data”json对象内。只需运行此代码。这是您想要的预期输出吗。是否希望json上的“data”字段作为对象数组？是的，如{“title”：“some title”，“data”：{“image”：“some image url”，“link”：“}因此，我可以稍后将其称为数据['image']…而不是{“title”：“some title”，“data”：[{“image”：“some image url”，“link”：“}]}，因为这变成了数据[0]['image']，现在我刚刚编辑了我的答案。现在JSON的格式是{“title”：“some title”，“data”：[{“image”：“some image url”，“link”：“}}}.这是您想要的输出吗？.谢谢。这很有效。我尝试了附加的if-then…但忘记初始化frmdata.data={}
var jsn={data:{}};
$('input','form:first').each(function(i,o){
  var na=$(o).attr('name');
  (na=='title'?jsn:jsn.data)[na]=o.value;
});