使用 jQuery 将表单数据抓取到对象中以生成任意数组和对象的值

Question

我有一个由一系列单元组成的 HTML 表单，如下所示：

<input name="categoryColor[]" />
<input name="categoryName[]" />

使用这个jQuery code，我可以捕获这些数据并将其返回到这样的对象中：

{categoryColor: [array of values],
categoryName: [array of values]}

下面是实际代码示例：

const getFormDataFromElem = function($elem, options) {
  options = options || {};
  const vis = options.onlyVisible ? ":visible" : "";
  const formInputs = $elem.find(`:input${vis}, [contenteditable=true]${vis}`);
  const data = {};
  formInputs.each(function() {
    const $this = $(this)
    const type = $this.attr('type');
    const val = type === "checkbox" ? (this.checked ? "1" : "0") :
      ($this.is('[contenteditable=true]') ? $this.text() : this.value);
    const name0 = $this.attr('name');
    const doArray = name0 && name0.slice(-2) === "[]";
    const name = doArray ? name0.slice(0, -2) : name0;
    if (!name || (!options.saveEmpty && !doArray && val === "")) {
      return;
    }
    if (doArray) {
      if (data.hasOwnProperty(name)) {
        data[name].push(val);
        return
      }
      data[name] = [val];
      return;
    }
    data[name] = val;
  });

  return data;
};

const data = getFormDataFromElem($('.input'));
$('.output').text(JSON.stringify(data, null, 2));

.output {
    font-family: monospace;
    white-space: pre;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h2>Input</h2>
<div class="input">
<input name="categoryName[]" value="phase1"/>
<input name="categoryColor[]" value="red"/>
<input name="categoryName[]" value="phase2"/>
<input name="categoryColor[]" value="green"/>
<input name="categoryName[]" value="phase3"/>
<input name="categoryColor[]" value="blue"/>
</div>

<h2>Output</h2>
<div class="output"></div>

但我希望能够像这样编写 HTML 表单单元

<input name="categories[].color" />
<input name="categories[].name" />

因为我真的需要这种形式的数据：

{categories: [array of objects],
}

对象的格式为{name: '<name of category>', color: '<color string>'}。

如何重写我的通用表单捕获例程以生成任意数组和对象的值？

Answer 1

以下假设您能够对构成一个对象的每组输入进行分组。然后不必解析名称，而是使用组容器上的数据属性作为主要对象属性名称。

仍然有点不清楚这是否是您所追求的，但也可以修改以满足更具体的需求。我意识到这些名称不是唯一的，并且不确定这是否是一个问题

const data = {};

$('.input').each(function(i){
   const $cont = $(this), 
          {struct, prop} = $cont.data(),          
          inputs = $cont.find('input').toArray();
         
     if(struct === 'obj'){
      data[prop] = data[prop] || [];     
      const obj = inputs.reduce((a,c)=>({...a, [c.name]:c.value}),{})
      data[prop].push(obj);      
   }
})

console.log(data)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="input" data-struct="obj" data-prop="otherCat">
  <input name="name" value="phase1" />
  <input name="color" value="red" />
</div>

<div class="input" data-struct="obj" data-prop="categories">
  <input name="name" value="phase2" />
  <input name="color" value="green" />
</div>

<div class="input" data-struct="obj" data-prop="categories">
  <input name="name" value="phase3" />
  <input name="color" value="blue" />
</div>