如何從多個HTML輸入創建key：value對象

Question

我得到以下HTML：

<div class="slot_subclass">
   <div class="form-group">      
        <input type="text" class="form-control slot" name="slot_name">      
   </div>
   <div class="form-group"> 
        <input type="text" class="form-control slot" name="slot_type">
   </div> 
</div> 
<div class="slot_subclass">
   <div class="form-group">      
        <input type="text" class="form-control slot" name="slot_name">      
   </div>
   <div class="form-group"> 
        <input type="text" class="form-control slot" name="slot_type">
   </div> 
</div>
<div class="slot_subclass">
   <div class="form-group">      
        <input type="text" class="form-control slot" name="slot_name">      
   </div>
   <div class="form-group"> 
        <input type="text" class="form-control slot" name="slot_type">
   </div> 
</div>  

slot_subclass的數量可以是無限的。

我需要解析所有這些輸入，並創建一個對象，其中鍵是slot_subclass （ slot_name ）的第一個input的值，value是第二個（ slot_type ）的值。

我嘗試了以下方法：

$(".slot").map(function(){
    return $(this).val();
}).get();

但是我只是得到一個簡單的值數組。 我可以將jQuery用於此任務。 謝謝。

UPD_1為了處理相同的鍵，我選擇了以下代碼（如果有興趣的話）：

jsonObj = [];
$(".slot_subclass").each(function() { 
    var slot_name = $(this).find("input[name=slot_name]").val();
    var slot_type = $(this).find("input[name=slot_type]").val();
    item = {};
    item[slot_name] =  slot_type;
    jsonObj.push(item);
});
console.log(jsonObj);

謝謝大家的幫助。

Answer 1

像這樣的代碼：

100％工作和測試

jsonObj = [];
$(".slot_subclass").each(function() { 
    var slot_name = $(this).("input[name=slot_name]").val();
    var slot_type = $(this).("input[name=slot_type]").val();
    item = {};
    item["slot_name"] = slot_name;
    item["slot_type"] = slot_type;
    jsonObj.push(item);
});
console.log(jsonObj);

例：

 jsonObj = []; $(".slot_subclass").each(function() { var slot_name = $(this).find("input[name=slot_name]").val(); var slot_type = $(this).find("input[name=slot_type]").val(); item = {}; item["slot_name"] = slot_name; item["slot_type"] = slot_type; jsonObj.push(item); }); console.log(jsonObj); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="slot_subclass"> <div class="form-group"> <input type="text" class="form-control slot" name="slot_name" value="1"> </div> <div class="form-group"> <input type="text" class="form-control slot" name="slot_type" value="11"> </div> </div> <div class="slot_subclass"> <div class="form-group"> <input type="text" class="form-control slot" name="slot_name" value="2"> </div> <div class="form-group"> <input type="text" class="form-control slot" name="slot_type" value="22"> </div> </div> <div class="slot_subclass"> <div class="form-group"> <input type="text" class="form-control slot" name="slot_name" value="3"> </div> <div class="form-group"> <input type="text" class="form-control slot" name="slot_type" value="33"> </div> </div> 

Answer 2

首先請注意，沒有“ JSON對象”之類的東西。 JSON是用於將數據序列化為字符串的符號。 它從來不是一個對象。

關於您的代碼， map()返回一個數組。 在您的示例中，此數組將僅包含值。 相反，您需要更改它以返回一個對象，該對象包含每個.slot_subclass組中的input元素的值。

一旦完成構建數組，就可以使用JSON.stringify構建JSON字符串，如下所示：

 var arr = $('.slot_subclass').map(function() { var obj = {}; $(this).find('.slot').each(function() { obj[this.name] = this.value; }); return obj; }).get(); console.log(arr); var json = JSON.stringify(arr); console.log(json); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="slot_subclass"> <div class="form-group"> <input type="text" class="form-control slot" name="slot_name"> </div> <div class="form-group"> <input type="text" class="form-control slot" name="slot_type"> </div> </div> <div class="slot_subclass"> <div class="form-group"> <input type="text" class="form-control slot" name="slot_name"> </div> <div class="form-group"> <input type="text" class="form-control slot" name="slot_type"> </div> </div> <div class="slot_subclass"> <div class="form-group"> <input type="text" class="form-control slot" name="slot_name"> </div> <div class="form-group"> <input type="text" class="form-control slot" name="slot_type"> </div> </div> 

Answer 3

以下基於：

其中key是第一個輸入的值

 // set values for demo setDemoValues() // get data based on above values var res = {}; $('.slot_subclass').each(function() { var $inputs = $(this).find('.slot'); res[$inputs[0].value] = $inputs[1].value; }) console.log(res) function setDemoValues() { $('.slot_subclass').each(function(i) { $(this).find('.slot').val(function() { return this.name + (i + 1); }) }); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="slot_subclass"> <div class="form-group"> <input type="text" class="form-control slot" name="slot_name"> </div> <div class="form-group"> <input type="text" class="form-control slot" name="slot_type"> </div> </div> <div class="slot_subclass"> <div class="form-group"> <input type="text" class="form-control slot" name="slot_name"> </div> <div class="form-group"> <input type="text" class="form-control slot" name="slot_type"> </div> </div> <div class="slot_subclass"> <div class="form-group"> <input type="text" class="form-control slot" name="slot_name"> </div> <div class="form-group"> <input type="text" class="form-control slot" name="slot_type"> </div> </div> 

Answer 4

因此，您可以做的是查詢所有輸入，將其名稱設置為鍵，並將其值設置為輸入。

如果您現在就這樣做，可能會遇到的問題是，由於您有多個具有相同名稱的輸入，因此您的值將被覆蓋。

您可以通過向其父容器添加唯一的ID或類來解決此問題。

var inputs = document.querySelectorAll("input");
var data = {};
for (var i = 0; i < inputs.length; i++) {
    data[inputs[i].name] = inputs[i].value;
}

console.log(data);

為了獲得一組特定的輸入，使用上面提到的唯一標識符，您要做的就是更改查詢選擇器。

var inputs = document.querySelectorAll("#container input");

編輯

您可以將未知數量的子類放入一個數組中。 遵循上述相同的JS，這只是一個額外的步驟。

var subclasses = document.querySelectorAll(".slot_subclass");
var data = [];
for (var i = 0; i < subclasses.length; i++) {
    if (!data[i]) data[i] = {};
    var inputs = subclasses[i].querySelectorAll("input");
    for (var o = 0; o < inputs.length; o++) {
        data[i][inputs[o].name] = inputs[o].value;
    }
}

console.log(data);
// outputs like: 
[
    0: {slot_name: "", slot_type: ""}
    1: {slot_name: "", slot_type: ""}
    2: {slot_name: "", slot_type: ""}
]

Answer 5

您的方法正確，但需要更改算法。 讓我們看一下$(".slot_subclass")是div元素的數組-迭代該數組，並同時獲得'key'和'value'值:)。 對於$(".slot_subclass")每個元素，您都可以通過$(el).find('.slot')類的東西來訪問第一和第二嵌套輸入，並且該數組的第一個元素是第一個輸入，第二個是一個第二個輸入。

Answer 6

您應該使用each() ，而不是map()

 $('.test').on('click', function() { var obj = {} $(".slot_subclass").each(function() { var $slots = $(this).find('.slot'); obj[$slots.eq(0).val()] = $slots.eq(1).val() }) console.log(obj) }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="slot_subclass"> <div class="form-group"> <input type="text" class="form-control slot" name="slot_name"> </div> <div class="form-group"> <input type="text" class="form-control slot" name="slot_type"> </div> </div> <div class="slot_subclass"> <div class="form-group"> <input type="text" class="form-control slot" name="slot_name"> </div> <div class="form-group"> <input type="text" class="form-control slot" name="slot_type"> </div> </div> <div class="slot_subclass"> <div class="form-group"> <input type="text" class="form-control slot" name="slot_name"> </div> <div class="form-group"> <input type="text" class="form-control slot" name="slot_type"> </div> </div> <button class="test">Test</button> 

Answer 7

用這個 ：

var res = {};
var names = $('.slot[name="slot_name"]');
var types = $('.slot[name="slot_type"]');
for (var i=0;i<names.length;i++) {
    res[$(names[i]).val()]=$(types[i]).val();
}
console.log(res); // = {"name1":type1,...,"nameN":typeN}