如何创建一个键：从多个HTML输入

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值是第二（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() { 
 
\t var slot_name = $(this).find("input[name=slot_name]").val(); 
 
\t var slot_type = $(this).find("input[name=slot_type]").val(); 
 
\t item = {}; 
 
\t item["slot_name"] = slot_name; 
 
\t item["slot_type"] = slot_type; 
 
\t 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">  
 
\t <input type="text" class="form-control slot" name="slot_name" value="1">  
 
    </div> 
 
    <div class="form-group"> 
 
\t <input type="text" class="form-control slot" name="slot_type" value="11">  
 
    </div> 
 
</div> 
 
<div class="slot_subclass"> 
 
    <div class="form-group">  
 
\t <input type="text" class="form-control slot" name="slot_name" value="2">   
 
    </div> 
 
    <div class="form-group"> 
 
\t <input type="text" class="form-control slot" name="slot_type" value="22">  
 
    </div> 
 
</div> 
 
<div class="slot_subclass"> 
 
    <div class="form-group">  
 
\t <input type="text" class="form-control slot" name="slot_name" value="3">  
 
    </div> 
 
    <div class="form-group"> 
 
\t <input type="text" class="form-control slot" name="slot_type" value="33">  
 
    </div> 
 
</div>

Answer 2

所以，你可以做的是查询所有的输入，设置他们的名字作为键和他们的价值作为他们的输入。

如果您现在就这样做，您可能遇到的问题是您的值将被覆盖，因为您有多个具有相同名称的输入。

您可以通过向父容器添加唯一的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 3

首先请注意，没有'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 4

你是一个正确的方式，但你需要改变你的算法。 让我们看看$(".slot_subclass")是div元素的数组 - 迭代该数组，并获得'key'和'value'值:)。对于$(".slot_subclass")的每个元素，您可以通过$(el).find('.slot')之类的东西访问第一个和第二个嵌套输入，并且该数组的第一个元素是第一个输入，第二个元素是第二个输入。

Answer 5

你应该使用each()，不map()

$('.test').on('click', function() { 
 
\t var obj = {} 
 
    
 
    $(".slot_subclass").each(function() { 
 
    var $slots = $(this).find('.slot'); 
 

 
    \t 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 6

使用此：

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} 

Answer 7

以下是基于：

其中键是第一输入的值

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