Как получить отправленную форму (входные данные типа name = "array [key]") типа данных как массив / объект в js для использования в обратном вызове submit

Question

У меня есть форма, в которой я отправляю несколько входов, содержащих атрибуты имени в виде массива, например name="array[key]"

<form onsubmit="callback($(this));">
    <input type="text" name="stock[quantity]">
    <input type="text" name="stock[old]">
    <input type="text" name="form[mrp]">
    <input type="text" name="form[price]">
</form>

Я пробовал новые formData($("form")[0]) и jQuery $("form").serializeArray(), оба возвращают name="array[key]" в виде строки.

Я хочу эти данные как многомерный объект, как мы получили это в php при отправке этой формы, как.

<script>
function callback($form){
    /* 
        here i want form data in js object like
        {
            stock : {quantity : ... , old : ....},
            form : {mrp : ... , price : ....}
        }

        or something like this
    */
}
</script>

Я использую JS, jQuery и Vue. js в этом проекте, на самом деле я хочу поместить данные формы в indexedDB после успешного сохранения на сервере. у меня есть разные таблицы / objectStore для stock и form

Answer 1

Попробуйте это ..

function callback($form) {
  let result = {};
  let formData = $form.serializeArray();        
  formData.forEach(obj => {
         let inputValue = obj.name.split('[');                 
           if (!result[inputValue[0]]) {
              result[inputValue[0]] = {};
           }
         let innerText = inputValue[1].replace(']','');
         result[inputValue[0]][innerText] = obj.value;
  });
  console.log(result);      
}

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

<form onsubmit="callback($(this)); return false;">
   <input type="text" name="stock[quantity]">
   <input type="text" name="stock[old]">
   <input type="text" name="form[mrp]">
   <input type="text" name="form[price]">
   <input type="submit" value="submit">
</form>