如何基於JavaScript中的HTML輸入創建JSON？

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

這是我要解決的方法：

 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> 

重要的是要注意，從表單訪問數據的正確方法是在實際元素上使用.serialize（），但是鑒於特殊的要求，即在自定義“數據”對象內擴展表單的某些部分的特殊要求，這種方法也需要進行其他操作。

JSBIN演示

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

也許解決方案已經在前面的答案中了，但是當我坐在火車上無事可做時，我整理了以下最小解決方案：

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

這可以進入$(function( ... )}部分，或者由某些click事件觸發。我目前正在處理頁面上第一個<form>元素內的所有輸入。您可以根據需要進行更改。