catching a form before submission and changing the structure of json

Question

so I have a form. When this form is submitted, I want to re-format it in a way which is "readable" by the back end. In this example, I have a survey. I want the generic structure to be like:

{
    survey_id: (string),
    responses:
    [
        {
            question: (String)
            answers: [ (String), ... ]
        },
        ...
    ]
}

I used this function to catch the form before it was submitted and log it:

submitSurvey : function( delay ) {
  $('#surveyForm').submit(function(e) {
    e.preventDefault();
    console.log(JSON.parse(JSON.stringify($(this).serializeArray())));
  });
});

However, when I submit my form, it comes out looking like this:

[{"name":"survey_id","value":"6"},
{"name":"do you like waffles?","value":"yeah we like waffles"},
{"name":"do you like pancakes?","value":"yeah we like pancakes"}]

The first one is the id of the survey itself, and the next two are questions and their answers

How could I modify the output of the forms to match the format specified above before sending it to the backend?

score 0 · Answer 1 · edited May 23 '17 at 12:11

It would be a little easier to confirm if we could see your HTML code, but I can tell you that, basically, what .serializeArray() is doing is simply creating an array of name/value pair objects from the form and all of its inputs (in this case, the JSON.parse() and JSON.stringify() aren't really adding anything . . . they just turn the array into a string and then back into the array again).

This approach can be extremely useful for generically packaging up form responses, but, if you want to create an Object that has a custom structure, you are going to have to do some manual mapping to get the data into structure that you want. There are basically two ways to do this:

Go through the form and its inputs and map them to the specific structures that you want (which is what it looks like you will have to do, based on your sample target structure),
Use .serializeArray() and then convert the "name" values to keys, and the "value" values to . . . uh . . . values. :) Here is some code that will do that: Convert form data to JavaScript object with jQuery

In the end, it looks like you would need to use the first approach, using a custom function that puts the values from the form into the "question/answer" structure that you are looking for . . . something along the lines of this (somewhat pseudocode-y, since I cant see your HTML ;) ):

var data = {};
data.survey_id = **VALUE**;
data.responses = [];

var newQuestion;
for each input {
    newQuestion = {};
    newQuestion.question = **VALUE**;
    newQuestion.answers = [];

    for each answer {
        newQuestion.answers.push(VALUE);
    }

    data.responses.push(newQuestion);
}

Again, you are going to have to determine the logic around how your specific form inputs are handled, since we can't see the HTML structure of the form, but that should give you the general approach that you are looking for.

catching a form before submission and changing the structure of json

1 Answers1