Javascript 从动态输入表单中添加对象到数组中

Question

我正在读取输入表单并获取 ID 为 tle_breakup_0、rtl_breakup_0、tle_breakup_1、rtl_breakup_1、tle_breakup_2、rtl_breakup_2。

$('#myForm').submit(function () {
  var $inputs = $('#myForm :input');
  $inputs.each(function () {
    var attr_name = this.id;
    var attr_value = $(this).val();

  });

});

我怎样才能得到下面是我想明智地收集分手索引 ID 的预期输出。

{
  "breakup": [{

    "tle_breakup_0": "12",
    "rtl_breakup_0": "12"
  },

  {
    "tle_breakup_1": "12",
    "rtl_breakup_1": "12"
  },
  {
    "tle_breakup_2": "12",
    "rtl_breakup_2": ""
  }
  ]
}

Answer 1

这实际上只是每个 id 最后一位的 'group by'。由于您使用的是 jquery ，因此您可以只使用 each 分组到在其外部声明的对象中。这里使用分组对象的 String#match() and then initiliazing objects that don't already exist using logical nullish assignment (??=) and setting the property using bracket notation. Finally the Object.values() 提取最后一位分配给 result.breakup.

const result = { breakup: [] };

$('#myForm').submit(function (e) {
  e.preventDefault();
 
  const grouped ={}
  $('#myForm input').each(function () {
    const attr_name = this.id;
    const attr_value = $(this).val();

    const key = attr_name.match(/\d+$/)?.[0];
    if (key!==undefined){
      (grouped[key] ??= {})[attr_name] = attr_value;
    }
  });
  
  result.breakup=Object.values(grouped);
  
  console.log(result);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form id="myForm">
    <input id="tle_breakup_0" type="text" value="10"/>
    <input id="rtl_breakup_0" type="text" value="10"/>
    <input id="tle_breakup_1" type="text" value="11"/>
    <input id="rtl_breakup_1" type="text" value="11"/>
    <input id="tle_breakup_2" type="text" value="12"/>
    <input id="rtl_breakup_2" type="text" />
    <button>Submit</button>
</form>

或者，如果您正在寻找基于 id 其他部分的更多动态分配，您可以简单地解析这些并根据需要使用它们。

const result = {};

$('#myForm').submit(function (e) {
  e.preventDefault();

  const grouped = {}
  $('#myForm input').each(function () {
    const attr_name = this.id;
    const attr_value = $(this).val();

    const [, group, key] = attr_name.split('_');
    if (group !== undefined && key !== undefined) {
      grouped[group] ??= {};
      grouped[group][key] ??= {};
      grouped[group][key][attr_name] = attr_value;
    }
  });

  const groupedResult = Object.fromEntries(
    Object.entries(grouped).map(([k, v]) => [k, Object.values(v)]));

  Object.assign(result, groupedResult);

  console.log(result);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form id="myForm">
    <input id="tle_breakup_0" type="text" value="10"/>
    <input id="rtl_breakup_0" type="text" value="10"/>
    <input id="tle_breakup_1" type="text" value="11"/>
    <input id="rtl_breakup_1" type="text" value="11"/>
    <input id="tle_other_2" type="text" value="12"/>
    <input id="rtl_other_2" type="text" />
    <button>Submit</button>
</form>

Javascript 从动态输入表单中添加对象到数组中

Javascript adding object in array from dynamic input form

javascript

jquery