如何将 HTML 输入元素的值收集到类似地图的对象中？

Question

我有这样的输入元素：

<input name="fruit" id="fruit" value="Orange">
<input name="vegetable" id="vegetable" value="Spinach">
<input name="dairy" id="dairy" value="Eggs">
<input name="bread" id="bread" value="Bread">
<input name="soup" id="soup" value="Soup">

我需要获取它们并创建一个像这样的对象：

{
  fruit: "Orange", 
  vegetable: "Spinach", 
  dairy: "Eggs", 
  bread: "Bread", 
  soup: "Soup"
}

我创建了这个方法，但也许可能有更好或更有效和简洁的方法来实现这个结果：

我的代码：

const inputs = document.getElementsByTagName('input');

function convertToObject(obj){
  let inputString = '';
  for(const input of inputs){
    inputString += `, "${input.id}": "${input.value}"`;
  }
  return JSON.parse(`{${inputString.substring(1).trim()}}`);
}

const objArray = convertToObject(inputs);
console.log(objArray);

Answer 1

new FormData如果您的输入包含在元素中，最简单的方法可能是使用form：

const form = document.getElementById("form");
const formData = new FormData(form);
console.dir(Object.fromEntries(formData));

<form id="form">
  <input name="fruit" id="fruit" value="Orange">
  <input name="vegetable" id="vegetable" value="Spinach">
  <input name="dairy" id="dairy" value="Eggs">
  <input name="bread" id="bread" value="Bread">
  <input name="soup" id="soup" value="Soup">
</form>

上面，我将表单数据对象包装在调用中Object.fromEntries()以获取对象输出，但根据您想要执行的操作，您可能不需要这样做，因为您可以简单地通过执行formData.get("fruit")for来访问元素的值示例（给出"Orange"），甚至form.fruit.value不需要创建 fromData 对象。

如果您没有包含所有元素的表单，那么您可以尝试以下选项之一。

在您的示例代码中，不需要首先构建字符串，因为您可以直接构建对象。这样您就可以避免将字符串解析为对象的需要，因为您从一开始就已经有了一个对象。例如：

const inputs = document.getElementsByTagName('input');

function convertToObject(obj){
  const result = {};
  for(const input of inputs){
    result[input.id] = input.value;
  }
  return result;
}

const objArray = convertToObject(inputs);
console.log(objArray);

<input name="fruit" id="fruit" value="Orange">
<input name="vegetable" id="vegetable" value="Spinach">
<input name="dairy" id="dairy" value="Eggs">
<input name="bread" id="bread" value="Bread">
<input name="soup" id="soup" value="Soup">

您还可以使用其他方法来构建对象，例如Object.fromEntries()传递对数组[key, value]。您可以通过借助 的映射函数将HTMLCollection（由 返回getElementsByTagName()）映射到包含对的数组来创建此数组：[key, value]Array.from()

const inputs = document.getElementsByTagName('input');

function convertToObject(inps){
  return Object.fromEntries(Array.from(inps, elem => [elem.id, elem.value]));
}

const objArray = convertToObject(inputs);
console.log(objArray);

<input name="fruit" id="fruit" value="Orange">
<input name="vegetable" id="vegetable" value="Spinach">
<input name="dairy" id="dairy" value="Eggs">
<input name="bread" id="bread" value="Bread">
<input name="soup" id="soup" value="Soup">