Создание JSON массива JSON объектов в JQuery

Question

Я пытаюсь отправить JSON Объект на мой сервер. В основном то, что я пытаюсь сделать, это получить ввод 2 текстовых полей, а затем список всех выбранных текстовых полей. Мой код javascript выглядит так:

function insertNewHero() {
        var selectedAbilities = [];
        $('#newhero input:checked').each(function() {
            selectedAbilities.push({
                "id": $(this).value,
                "ability": $(this).textContent
            });
        });

        var superhero = {
            "name": document.getElementById("name").value,
            "surname": document.getElementById("lastName").value,
            "abilities": selectedAbilities
        }

        $.ajax({
            type: "POST",
            contentType: 'application/json; charset=utf-8',
            dataType: 'json',
            url: "/insertNewHero",
            data: JSON.stringify(superhero),
            success: function (result) {
                // other stuff
            }
        });

Я действительно еще не эксперт по javascript, но из того, что я нашел из других ответов и постов, это то, что я мог бы поставить вместе и думал, что это может сработать. Внутренняя часть работает нормально, так как я протестировал ее с PostMan и отлично работает. Вот как выглядит JSON, который я посылаю из PostMan:

{
    "name": "Wanda",
    "surname": "Maximoff",
    "abilities": [
            {
                "id": 4,
                "ability": "Telechinesis"
            },
            {
                "id": 3,
                "ability": "Flight" 
            }
        ]
}

Что может быть не так в коде JavaScript?

Вот пример текстовых полей и одного из флажков:

<div class="form-group">
     <label for="lastName">Last Name</label>
          <input type="textfield" class="form-control" id="lastName" placeholder="Last Name" required>
</div>
<div class="custom-control custom-checkbox">
    <input type="checkbox" class="custom-control-input" style="background: #bf0000; color: #bf0000; border: solid #bf0000" id="InsertFlight">
    <label class="custom-control-label" for="InsertFlight" value="3">Flight</label>
 </div>

Видимо, код javascript неправильно анализирует значение и идентификаторы флажков. Как сделать из флажков HTML содержимое, массив JSON, правильно отформатированный

Answer 1

Основная проблема, похоже, заключается в извлечении способностей из HTML.
. Для этого переберите все отмеченные флажки, а затем используйте jQuery функции, такие как .closest() или .find(), чтобы получить * 1004. *. Оттуда вы можете извлечь необходимую информацию.

function insertNewHero() {
  var abilities = {};
  $('#newhero .custom-checkbox input:checked').each(function() {
    const $label = $(this).closest("div").find("label");
    abilities[$label.data("id")] = $label.text();
  });

  var superhero = {
    name: "Wanda",
    surname: "Maximoff",
    abilities
  }
  
  console.log(superhero);

  // send data to backend
}

$('#newhero').on("submit", function(e) {
	e.preventDefault();
  insertNewHero();
});

#newhero, .form-group {
  padding: 1em;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

<form id="newhero">
  <div class="custom-control custom-checkbox">
    <input type="checkbox" class="custom-control-input" style="" id="InsertFlight">
    <label class="custom-control-label" for="InsertFlight" data-id="3">Flight</label>
  </div>
  <div class="custom-control custom-checkbox">
    <input type="checkbox" class="custom-control-input" style="" id="InsertTelekinesis">
    <label class="custom-control-label" for="InsertTelekinesis" data-id="4">Telekinesis</label>
  </div>
  <div class="form-group">
    <input type="submit">
  </div>
</form>