Como serializar todos os dados de um formulário em um objeto JSON usando jQuery? #fastTip

Um dos pilares de um código bem escrito é: DRY (Dont Repeat Yourself - não se repita). Acontece que muitas vezes nos deparamos com situações que por conta da necessidade de entrega expressa (famoso código miojo - feito em 2 minutos), acabamos deixando de aplicar boas práticas. O que difere um amador de um profissional é a sua capacidade de avaliar o impacto que um código mal escrito causa e identificar os caminhos pra resolver esses impasses. Enfim, vamos ao que interessa:

O Problema

Desejo criar um objeto JSON à partir de um formulário, para ser enviado em uma requisição assíncrona. Atualmente, o objeto é criado assim:

var data = {
 name: $('input[name="name"]').val(),
 email: $('input[name="email"]').val(),
};

Olhando pra esse código, vemos diversos problemas: Se mudar o name do input, precisará ir lá no código para alterar a atribuição. Se houver um formulário com 20 campos, terá que fazer 20 atribuições, e assim por diante.

A Solução

Crio um objeto FormTool que servirá como utilitário para ser reaproveitado em toda a aplicação. Dentro desse objeto teremos 2 funções: convertFormDataSerializedArrayIntoObject, que como o próprio nome indica, converte dados de um formulário serializados em um array em um objeto; e transformArrayOfObjectsIntoOneObject, que transformará um array de objetos em um único objeto (isso será usado pela função convertFormDataSerializedArrayIntoObject). Veja:

const FormTool = {
    convertFormDataSerializedArrayIntoObject: function(serializedData) {
        var valuesIntoArrayOfObjects = serializedData.map(function(data) {
            var valueIntoString =
                "{" +
                JSON.stringify(data.name) +
                ": " +
                JSON.stringify(data.value) +
                "}";
            return JSON.parse(valueIntoString);
        });
        return FormTool.transformArrayOfObjectsIntoOneObject(
            valuesIntoArrayOfObjects
        );
    },
    transformArrayOfObjectsIntoOneObject: function(objects) {
        var oneObject = objects.reduce(function(objectReduced, item) {
            return Object.assign(objectReduced, {
                [Object.keys(item)[0]]: Object.values(item)[0]
            });
        }, {});
        return oneObject;
    }
};

Em seguida, o que precisamos fazer é usar esse utilitário da seguinte maneira:

$('#form').on('submit', function(event){
      var form = $(this);
      var serializedValues = form.serializeArray();
      var data = FormTool.convertFormDataSerializedArrayIntoObject(
          serializedValues
      );

      // ...
});

Observe que agora, independente da quantidade de campos um formulário tenha, você precisará de apenas 2 linhas para obter um objeto JSON. Até a próxima ;)