Ndtyjky

I have a, next to a couple of fixed options, a variable number of yes/no radio inputs named other[index]. Using $(form).serializeArray() I get an array of name/value objects. Using reduce I'm able to reduce em down to an actual object.

const seializedForm = $(event.currentTarget.form).serializeArray();



const gdpr = seializedForm.reduce((aggragation, option) => { 

    return {

        ...aggragation,

        [option.name]: option.value === 'true'

}}, {});

The problem here is that the result isn't exactly what I need:

{

  "canNotify":true,

  "canContact":true,

  "canProcess":true,

  "other[0]":false,

  "other[1]":true,

  "other[2]":false

}

I'd like it to be:

{

  "canNotify":true,

  "canContact":true,

  "canProcess":true,

  "other": [

      false,

      true,

      false

  ]

}

Any suggestions?

For each name - remove the brackets, and if the key already exists in the array, combine the values to an array using array spread:

const serializedForm = [{"name":"canNotify","value":"true"},{"name":"canContact","value":"true"},{"name":"canProcess","value":"false"},{"name":"other[0]","value":"false"},{"name":"other[1]","value":"true"},{"name":"other[2]","value":"false"}];



const gdpr = serializedForm.reduce((aggragation, { name, value }) => {

  const isArray = name.includes('[');

  const key = name.replace(/[.+]/g, '');

  const val = value === 'true';



  return {

    ...aggragation,

    [key]: isArray ? [...aggragation[key] || , val] : val

  };

}, {});



console.log(gdpr);

Without knowing what the full object structure looks like, why not just check what the name contains before returning, if the name contains the array syntax. or the string other, then we can assume that it is part of the other form collection structure?

const seializedForm = $(event.currentTarget.form).serializeArray();



const gdpr = seializedForm.reduce((aggragation, option) => {

    if (isInArrayOfOptions(option)) {

        return {

            ...aggragation,

            /* Return a new array combining the current with the next option.value*/

            'other': [...aggragation.other, ...[option.value === 'true']]

        }

    }

    return {

        ...aggragation,

        [option.name]: option.value === 'true'

    }

}, {});