Javascript 如何从几个HTML输入创建key:value对象

我得到了以下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>  

但我只得到一个简单的值数组。我可以使用jQuery完成此任务。多谢各位

UPD_1为了处理相同的键，我选择了以下代码（如果有人感兴趣）：

---

谢谢大家的帮助。

因此，您可以查询所有输入，将它们的名称设置为键，将它们的值设置为输入

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

您可以通过向其父容器添加唯一的ID或类来解决这个问题

var inputs=document.querySelectorAll（“输入”）；
变量数据={}；
对于（变量i=0；i

为了获得一组特定的输入，使用上面提到的唯一标识符，您所要做的就是更改查询选择器

var inputs=document.querySelectorAll（“容器输入”）；

编辑

拥有未知数量的子类，可以将它们放入数组中。按照上面相同的JS，这只是一个额外的步骤

var subclass=document.queryselectoral（“.slot_subclass”）；
var数据=[]；
对于（var i=0；i

像这样的代码：

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_子类”）。每个（函数（）{
var slot_name=$（this）.find（“输入[name=slot_name]”）.val（）；
var slot_type=$（this）.find（“输入[name=slot_type]”）.val（）；
项目={}；
项目[“插槽名称”]=插槽名称；
项目[“插槽类型”]=插槽类型；
jsonObj.push（项目）；
});
console.log（jsonObj）

首先请注意，没有所谓的“JSON对象”。JSON是将数据序列化为字符串的符号。它从来不是一个物体

对于代码，
map（）
返回一个数组。在您的示例中，此数组将仅包含值。相反，您需要更改它以返回一个对象，该对象保存每个
.slot\u子类
组中的
输入
元素的值

一旦完成了构建数组的步骤，就可以使用
JSON.stringify
构建JSON字符串，如下所示：


var arr=$（'.slot_subclass'）.map（函数（）{
var obj={}；
$（this）.find（'.slot'）.each（function（）{
obj[this.name]=this.value；
});
返回obj；
}).get（）；
控制台日志（arr）；
var json=json.stringify（arr）；
log（json）
您的方法是正确的，但您需要更改算法。
让我们看看
$（“.slot\u subclass”）
是div元素的数组-迭代该数组，并获得“key”和“value”值：）。对于
$（“.slot\u subclass”）
的每个元素，您可以通过类似
$（el）的方式访问第一个和第二个嵌套输入。查找（'.slot'）
，该数组的第一个元素是第一个输入，第二个是第二个输入。
您应该使用
each（）
，而不是
map（）


$（'.test'）。在（'click'，function（）上{
var obj={}
$（“.slot_子类”）。每个（函数（）{
var$slots=$（this.find（'.slot'）；
obj[$slots.eq（0.val（）]=$slots.eq（1.val（））
})
控制台日志（obj）
})

测试
以下内容基于：

其中key是第一个输入的值


//为演示设置值
setDemoValues（）
//根据上述值获取数据
var res={}；
$（'.slot_子类'）。每个（函数（）{
var$inputs=$（this.find（'.slot'）；
res[$inputs[0]。值]=$inputs[1]。值；
})
console.log（res）
函数setDemoValues（）{
$（'.slot_子类'）。每个（函数（i）{
$（this.find（'.slot'）.val（function（）{
返回this.name+（i+1）；
})
});
}

首先请注意，没有“JSON对象”这样的东西。JSON是将数据序列化为字符串的符号。它从来不是一个物体。对于代码，
map（）
返回一个数组。在您的示例中，此数组将仅包含值，而不包含键：值对。问题是您有多个同名字段，这在单个对象中无效。我需要是
名称
是
slot\u子类
中第一个输入的值，
值
是第二个输入的值。理想情况下，不会出现类名或html
name
属性，我会为您添加答案。我不得不修改您使用的数组格式，但这是在重复输入的情况下唯一可行的方法names@Jack我修改了你问题的误导性措辞。正如其他人所指出的，没有“JSON对象”。避免使用这个术语，它会让您错误地考虑JS和JSON。问题是，有多个同名元素，因此生成的对象只有两个properties@RoryMcCrossan我在原来的问题中遗漏了这一点。很抱歉更新了我的答案。虽然这有效，但它相当脆弱。如果更改HTML，则必须更新不太理想的JS。您的代码返回一个对象数组，而不是一个对象。您的代码返回
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);

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