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

我有基於多個HTML表格的輸入的某些麻煩創建多維度JSON：如何在JavaScript中基於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"}

Wha T I需要的反而是後「標題」，我想創建一個數據對象，並添加一切爲「數據」的，像這樣的子水位：

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

任何幫助表示讚賞。

謝謝，

來源

2017-09-08 Rick

這裏是我會解決這個問題的辦法：

var inputToJson = function() { 
 
\t var formData = {}; 
 
\t formData.data = {}; 
 
\t $('input').each(function(index) { 
 
\t if($(this).attr('name')=="title") { 
 
\t \t formData[$(this).attr('name')] = $(this).val(); 
 
\t } 
 
\t else { 
 
\t \t formData["data"][$(this).attr('name')] = $(this).val(); 
 
\t } 
 
\t }); 
 
\t 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

來源

2017-09-08 03:57:54

謝謝。這工作。我已經嘗試了額外的，如果然後...但忘記初始化frmdata.data = {} – Rick

下面的代碼給出了你想要的輸出。只要通過這個。

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>

來源

2017-09-08 03:33:42

謝謝吉諾。我忘了提及'形象'和'鏈接'是動態的，可能會有所不同。因此，我做了.each函數，以便它可以遍歷。唯一不變的是'title'輸入...'title'之後的所有字段都應該在'data'json對象中。 – Rick

只需運行此代碼即可。這是您想要的預期輸出。 –

你想在你的JSON上的'data'字段作爲一個對象數組嗎？ –

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>

來源

2017-09-08 03:40:14

也許該解決方案已經在以前的答案之一，但我坐在有沒有其他事情可做我總結了以下最小解火車：

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>元素內的所有輸入。您可以更改以適應您的需求。

來源

2017-09-08 05:48:25 cars10m

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

回答

相關問題