将数组转换为具有相同输入名称的对象javascript

Question

整晚都在尝试所有可能的解决方案，但我找不到满足我需要的解决方案，而且我仍然是 JavaScript 的新手

我尝试将表单数据转换为对象的解决方案是

$('input.submit').click(function(e){
 e.preventDefault();
 var formData = $('form.anything').serializeArray();
 console.log(formData);
});

数组的输出看起来像下面的图片链接

使用 serializeArray() 的输出

我试图使用 jquery 将其转换为对象数组。 我发现的一些方法如下，但它没有给我对象格式

$.fn.serializeObject = function() {
var stored_data = {};
var form_data = this.serializeArray();
$.each(form_data, function() {
  if (stored_data[this.name]) {
      if (!stored_data[this.name].push) {
          stored_data[this.name] = [stored_data[this.name]];
      }
      stored_data[this.name].push(this.value || '');
  } else {
      stored_data[this.name] = this.value || '';
  }
});

我得到的输出是这样的：

使用 serializeObject()

尝试解决方案的输出此输出似乎接近我想要的对象格式。

希望信息有用。

预期产出

[
  cashin: [
    0: {
      name: [...],
      amount: [...],
      type: [...]
    },
    1: {
      name: [...],
      amount: [...],
      type: [...]
    }
  ],
  cashout: [
    0: {
      name: [...],
      amount: [...],
      type: [...]
    },
    1: {
      name: [...],
      amount: [...],
      type: [...]
    }
  ]
]

更新资料

这是html中表单的代码

<form id="cashin_form" class="anything" action="/cashins" accept-charset="UTF-8" method="post"><input type="hidden" name="authenticity_token" value="xxxx">


  <div id="cashin_form_item">

  <div id="cashin_form-data" class="field remove-item cashin-form-data">
      <label for="cashin_name">Name</label>
      <input type="text" value="" name="cashin[name]" id="cashin_name">
      <label for="cashin_amount">Amount</label>
      <input type="number" name="cashin[amount]" id="cashin_amount">
      <label for="cashin_type">Type</label>
      <select name="cashin[type]" id="cashin_type"><option value="1">Recurring</option>
<option value="2">This Time Only</option></select>

    <a href="#" class="remove-field btn-remove-customer">Remove Fields</a></div><div id="cashin_form-data" class="field remove-item cashin-form-data">
      <label for="cashin_name">Name</label>
      <input type="text" value="" name="cashin[name]" id="cashin_name">
      <label for="cashin_amount">Amount</label>
      <input type="number" name="cashin[amount]" id="cashin_amount">
      <label for="cashin_type">Type</label>
      <select name="cashin[type]" id="cashin_type"><option value="1">Recurring</option>
<option value="2">This Time Only</option></select>

    <a href="#" class="remove-field btn-remove-customer">Remove Fields</a></div><div id="cashin_form-data" class="field remove-item cashin-form_last">
    <!-- start input -->
      <label for="cashin_name">Name</label>
      <input type="text" value="" name="cashin[name]" id="cashin_name">
      <label for="cashin_amount">Amount</label>
      <input type="number" name="cashin[amount]" id="cashin_amount">
      <label for="cashin_type">Type</label>
      <select name="cashin[type]" id="cashin_type"><option value="1">Recurring</option>
<option value="2">This Time Only</option></select>

    <a href="#" class="remove-field btn-remove-customer">Remove Fields</a><a href="#" id="add_item">Add Item</a></div></div>
  <!-- end input -->
  <br>
     <label for="cashin_name">Name</label>
     <input type="text" value="" name="cashout[name]" id="cashout_name">
     <label for="cashout_amount">Amount</label>
     <input type="number" name="cashout[amount]" id="cashout_amount">
     <label for="cashout_type">Type</label>
     <select name="cashout[type]" id="cashout_type">
       <option value="1">Recurring</option>
       <option value="2">This Time Only</option>
     </select>
  <div class="actions">
    <input type="submit" name="commit" value="Submit Form" class="submit" data-disable-with="Submit Form">
  </div>
</form>

当用户单击“添加项目”按钮时，输入块将相应增加。 但是现在我面临的问题是为每个输入创建对象，因为它有cashin[...]和cashout[...]将它发送到服务器。

Answer 1

此代码可能对您有所帮助。

 $('#cashin_form').on('submit', function(event) { event.preventDefault(); let formdata = $('#cashin_form').serializeArray(); let stored_data = { cashin: [], cashout: [] }; let temp_cashin_object = {}; let temp_cashout_object = {}; $.each(formdata, (key, obj) => { if(obj.name !== 'authenticity_token') { switch(obj.name) { case 'cashin[name]': temp_cashin_object['name'] = obj.value; break; case 'cashin[amount]': temp_cashin_object['amount'] = obj.value; break; case 'cashin[type]': temp_cashin_object['type'] = obj.value; stored_data.cashin.push(temp_cashin_object); temp_cashout_object = {}; break; case 'cashout[name]': temp_cashout_object['name'] = obj.value; break; case 'cashout[amount]': temp_cashout_object['amount'] = obj.value; break; case 'cashout[type]': temp_cashout_object['type'] = obj.value; stored_data.cashout.push(temp_cashout_object); temp_cashout_object = {}; break; default: break; } } }); console.log(stored_data); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form id="cashin_form" class="anything" action="/cashins" accept-charset="UTF-8" method="post"><input type="hidden" name="authenticity_token" value="xxxx"> <div id="cashin_form_item"> <div id="cashin_form-data" class="field remove-item cashin-form-data"> <label for="cashin_name">Name</label> <input type="text" value="" name="cashin[name]" id="cashin_name"> <label for="cashin_amount">Amount</label> <input type="number" name="cashin[amount]" id="cashin_amount"> <label for="cashin_type">Type</label> <select name="cashin[type]" id="cashin_type"><option value="1">Recurring</option> <option value="2">This Time Only</option></select> <a href="#" class="remove-field btn-remove-customer">Remove Fields</a></div><div id="cashin_form-data" class="field remove-item cashin-form-data"> <label for="cashin_name">Name</label> <input type="text" value="" name="cashin[name]" id="cashin_name"> <label for="cashin_amount">Amount</label> <input type="number" name="cashin[amount]" id="cashin_amount"> <label for="cashin_type">Type</label> <select name="cashin[type]" id="cashin_type"><option value="1">Recurring</option> <option value="2">This Time Only</option></select> <a href="#" class="remove-field btn-remove-customer">Remove Fields</a></div><div id="cashin_form-data" class="field remove-item cashin-form_last"> <!-- start input --> <label for="cashin_name">Name</label> <input type="text" value="" name="cashin[name]" id="cashin_name"> <label for="cashin_amount">Amount</label> <input type="number" name="cashin[amount]" id="cashin_amount"> <label for="cashin_type">Type</label> <select name="cashin[type]" id="cashin_type"><option value="1">Recurring</option> <option value="2">This Time Only</option></select> <a href="#" class="remove-field btn-remove-customer">Remove Fields</a><a href="#" id="add_item">Add Item</a></div></div> <!-- end input --> <br> <label for="cashin_name">Name</label> <input type="text" value="" name="cashout[name]" id="cashout_name"> <label for="cashout_amount">Amount</label> <input type="number" name="cashout[amount]" id="cashout_amount"> <label for="cashout_type">Type</label> <select name="cashout[type]" id="cashout_type"> <option value="1">Recurring</option> <option value="2">This Time Only</option> </select> <div class="actions"> <input type="submit" name="commit" value="Submit Form" class="submit" data-disable-with="Submit Form"> </div> </form>

输出