Как я сериализирую данные формы, чтобы включить дочернюю коллекцию? - PullRequest
Новая
       4

Как я сериализирую данные формы, чтобы включить дочернюю коллекцию?

0 голосов
/ 18 ноября 2018

У меня есть страница в моем веб-приложении, где я пытаюсь создать объект Person, что я делаю с помощью AJAX POST. Формат JSON, который мне нужно отправить, ожидаемая конечная точка API: 

{
    "categoryId": "string",
    "name": "string",   
}

, что легко достижимо с помощью этой разметки HTML: 

<form id="form">
    <input name="categoryId" value="..." type="hidden" />

    <input name="name" type="text" />

    <button type="submit">Create</button>
</form>

, а затем просто сериализовать данные для передачи вместе с $('#form').serialize()

Проблема в том, что мои требования изменились, и мне нужно отправить дополнительную информацию - детскую коллекцию по Персоне. Конечная точка API теперь ожидает этого: 

{
  "categoryId": "string",
  "name": "string",
  "aliases": [
  {
      "aliasName": "string",
      "position": 0
  },
  {
      "aliasName": "string",
      "position": 0
  },
  {
      "aliasName": "string",
      "position": 0
  }]
}

Я не уверен, как мне отформатировать мою HTML-разметку, чтобы приспособиться к этому. Я мог бы установить name="aliasName" и name="position" в нескольких текстовых полях, но как я могу сгруппировать их вместе и под родительским aliases?

1 Ответ

0 голосов
/ 18 ноября 2018

Вы можете попробовать использовать jquery-serialize-object

Пример ниже: 

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-serialize-object/2.5.0/jquery.serialize-object.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
      var json = JSON.stringify($("#my-form").serializeObject());
      console.log(json);
      //alert(json);
      $("#divId").text(json);
    });
});
</script>
</head>
<body>

<form action="" name="my-form" id="my-form">
  some ID: <input type="text" name="someId" value="1"><br>
  First name: <input type="text" name="user[0][FirstName]" value="Mickey1"><br>
  Last name: <input type="text" name="user[0][LastName]" value="Mouse1"><br>
   First name: <input type="text" name="user[1][FirstName]" value="Mickey2"><br>
  Last name: <input type="text" name="user[1][LastName]" value="Mouse2"><br>
  <div id="divId"></div>
</form>

<button>Serialize form values</button>

<div></div>

</body>
</html>

CDN:

https://cdnjs.cloudflare.com/ajax/libs/jquery-serialize-object/2.5.0/jquery.serialize-object.min.js

Stackoverflow вопрос в похожих строках:

Преобразование данных формы в объект JavaScript с помощью jQuery

Надеюсь, это поможет.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...