Покрытие массива для объекта с тем же входным именем 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>

Выход