Сериализация формы и изменение входных имен (удаление части массива входных имен)

Question

Я хочу сериализовать мою html форму и отправить ее на свой сервер через ajax, но перед отправкой формы я хочу переименовать имена переменных и удалить начальную часть, например: BranchViewModels[0]. , Я хочу изменить:

изменить: BranchViewModels[0].BranchName на: BranchName

изменить: BranchViewModels[1].AddressViewModel.AddressId на: AddressViewModel.AddressId

В основном, когда я генерирую форму, все входные имена отображаются в виде массива, но перед отправкой формы я хочу избавиться от секции массива входного имени (в этом примере BranchViewModels [0].).

Я объяснил, почему я я делаю это здесь

Я также создал jsfiddle для следующего примера.

function updateBranch() {
  $('.save-branch-button').click(function() {
    var branchForm = $(this).closest('form');
    var serializedform = branchForm.find('.form :input').serialize();
    alert('I want to change the input names in this serialized form: \n\n' + serializedform	);
    
    // 1. iterated through serialized form
    //
    // remove BranchViewModels[i]. from the name, e.g.
    // replace: BranchViewModels[0].BranchName
    // with: BranchName


    // 2. Submit the form
    /* $.ajax({ 
        url: "/my-server",
        data: {branchViewModel: <-- serialized model},
			dataType: 'json',
      type: "POST"}); */
  });
}

jQuery(document).ready(function($) {
  updateBranch();
});

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

<form onsubmit="return false;" novalidate="novalidate">
  <div class="form">

    <div class="form-group">
      <label>Branch name</label>
      <input class="form-control" data-val="true" id="BranchViewModels_0__BranchName" name="BranchViewModels[0].BranchName" type="text" value="branch 1">
    </div>

    <hr />

    <div class="form-group">
      <label>Branch location</label>
      <div>
        <input data-val="true" id="BranchViewModels_0__AddressViewModel_AddressId" name="BranchViewModels[0].AddressViewModel.AddressId" value="1956">
      </div>

      <div>
        <input class="address-street-address" data-val="true" id="BranchViewModels_0__AddressViewModel_StreetAddress" name="BranchViewModels[0].AddressViewModel.StreetAddress" value="Wellington 6011, New Zealand">
      </div>
    </div>

    <input type="button" class="btn btn-primary-action save-branch-button" value="Save">

  </div>
</form>

Answer 1

function updateBranch() {
  $('.save-branch-button').click(function() {
    var branchForm = $(this).closest('form');
    var serializedform = branchForm.find('.form :input').serializeArray();
    console.log(serializedform);
    const obj = {};
    for(let d of serializedform){
            obj[d.name.split('.').pop()] = d.value
        }
    console.log(obj);
}

Answer 2

Верните сериализованные данные в Deserialize, затем измените на что хотите. Надеюсь, это поможет вам.

console.log(deparam(serializedform));

function deparam(query) {
  var pairs, i, keyValuePair, key, value, map = {};
  // remove leading question mark if its there
  if (query.slice(0, 1) === '?') {
    query = query.slice(1);
  }
  if (query !== '') {
    pairs = query.split('&');
    for (i = 0; i < pairs.length; i += 1) {
      keyValuePair = pairs[i].split('=');
      key = decodeURIComponent(keyValuePair[0]);
      value = (keyValuePair.length > 1) ? decodeURIComponent(keyValuePair[1]) : undefined;
      map[key] = value;
    }
  }
  return map;
}