如何从多个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}