Capturing "radio" input data and transforming into JSON

Question

(This project is being developed with Spring Boot + Thymeleaf) I have an html page that will work as a questionnaire containing about 100 questions (the code below is just an example). Each question has 4 inputs.

<div>
    <input class="question-option" type="radio" th:name="${question.id}" th:data-correct="${question.correctOption}" value="a" /><span th:text="${question.optionA}"></span>
    <input class="question-option" type="radio" th:name="${question.id}" th:data-correct="${question.correctOption}" value="b" /><span th:text="${question.optionB}"></span>
    <input class="question-option" type="radio" th:name="${question.id}" th:data-correct="${question.correctOption}" value="c" /><span th:text="${question.optionC}"></span>
    <input class="question-option" type="radio" th:name="${question.id}" th:data-correct="${question.correctOption}" value="d" /><span th:text="${question.optionD}"></span>
</div>

I want to take, via Javascript (Jquery), all inputs that are "checked" and store them in a JSON and then send this object to a controller via Ajax.

function getAllResults() {
var inputs = $('input:radio:checked');
for (var i = 0; i < inputs.length; i++) {
    //inserir os dados em um objeto JSON 
}

My question is (if possible) how to store the data within JSON? Example:

("Answer" would be the attribute "value" and "correctOption" would be the attribute "th:data-correct")

[
  {"answer": c, "correctOption": b}
  {"answer": a, "correctOption": d}
  {"answer": d, "correctOption": a}
  {"answer": b, "correctOption": c}
]

Answer 1

You can make a .push of objects with the values in an array.

In the example I changed some attributes so that you can see the result here in the snippet:

function getAllResults() {
   
   var respostas = []; // array onde serão guardados todos os resultados
   
   var inputs = $('input:radio:checked');
   
   for (var i = 0; i < inputs.length; i++) {
      respostas.push({
         "answer" : inputs[i].value,
         "correctOption":  inputs[i].dataset.correct
      });
   }
   
   console.log(respostas);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
   Marque uma opção
   <br>
    <input class="question-option" type="radio" name="q1" data-correct="b" value="a" /><span th:text="${question.optionA}"></span>
    <input class="question-option" type="radio" name="q1" data-correct="b" value="b" /><span th:text="${question.optionB}"></span>
    <input class="question-option" type="radio" name="q1" data-correct="b" value="c" /><span th:text="${question.optionC}"></span>
    <input class="question-option" type="radio" name="q1" data-correct="b" value="d" /><span th:text="${question.optionD}"></span>
</div>
<div>
   Marque uma opção
   <br>
    <input class="question-option" type="radio" name="q2" data-correct="d" value="a" /><span th:text="${question.optionA}"></span>
    <input class="question-option" type="radio" name="q2" data-correct="d" value="b" /><span th:text="${question.optionB}"></span>
    <input class="question-option" type="radio" name="q2" data-correct="d" value="c" /><span th:text="${question.optionC}"></span>
    <input class="question-option" type="radio" name="q2" data-correct="d" value="d" /><span th:text="${question.optionD}"></span>
</div>
<button onclick="getAllResults()">Resultados</button>