"Converting a text into a property that can be

Question

"Converting a text into a property that can be

In my scenario, I have a set of fixed options along with a dynamic number of yes/no radio inputs named other[index]. By utilizing $(form).serializeArray(), I can obtain an array of name/value objects. Through the use of the reduce method, I am then able to condense them into a single object.

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

const gdpr = serializedForm.reduce((aggregation, option) => {
    return {
        ...aggregation,
        [option.name]: option.value === 'true'
    }
}, {});

The issue lies in the result not aligning with my desired outcome:

{
  "canNotify":true,
  "canContact":true,
  "canProcess":true,
  "other[0]":false,
  "other[1]":true,
  "other[2]":false
}

What I actually desire is:

{
  "canNotify":true,
  "canContact":true,
  "canProcess":true,
  "other": [
      false,
      true,
      false
  ]
}

Do you have any recommendations on achieving this structure?

javascript arrays

Answer 1

Answer №1

To modify each name, remove the brackets. If the key is already in the array, combine the values into an array using array spread:

const data = [{"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 updatedData = data.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(updatedData);

Answer 2

To modify each name, remove the brackets. If the key is already in the array, combine the values into an array using array spread:

const data = [{"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 updatedData = data.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(updatedData);

Answer 3

Answer №2

When considering the object structure as a whole, one approach could be to analyze the content of the name before proceeding with the return. For instance, if the name includes the array syntax [] or the word other, we might infer that it belongs to a different type within the form collection structure?

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

const gdpr = serializedForm.reduce((aggregation, option) => {
    if (isInArrayOfOptions(option)) {
        return {
            ...aggregation,
            /* Merge current and next option.value into a new array */
            'other': [...aggregation.other, ...[option.value === 'true']]
        }
    }
    return {
        ...aggregation,
        [option.name]: option.value === 'true'
    }
}, {});

Answer 4

When considering the object structure as a whole, one approach could be to analyze the content of the name before proceeding with the return. For instance, if the name includes the array syntax [] or the word other, we might infer that it belongs to a different type within the form collection structure?

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

const gdpr = serializedForm.reduce((aggregation, option) => {
    if (isInArrayOfOptions(option)) {
        return {
            ...aggregation,
            /* Merge current and next option.value into a new array */
            'other': [...aggregation.other, ...[option.value === 'true']]
        }
    }
    return {
        ...aggregation,
        [option.name]: option.value === 'true'
    }
}, {});

"Converting a text into a property that can be

Answer №1

Answer №2

Similar questions

(Definition) What is the proper way to reference a variable inside another variable?

Creating a search-enabled multi-select feature in a Tabulator.js column

Create a social chat platform similar to Facebook by implementing a chat box feature with the help of AJAX, jQuery

Spin a Material UI LinearProgress

The delivery person is not receiving a reply after making the delivery

"Trouble arises with the match() function in relation to email regex validation

Issue encountered with SQL server 2008 due to connection error

Tips for effectively refining an Angular model (array) without compromising its integrity

Discovering intersections between Polylines on Google Maps - a comprehensive guide

What is the reason that the 400 status code consistently causes the enter catch block to execute when using axios?

The MySQL error wreaks havoc on the Node.js server, causing it to

MongoDB date query with $gte and $le operators mm/dd/yy

React Material-ui Dropdown Component

I'm looking to generate a semicircle progress bar using jQuery, any suggestions on how

Is it possible for a button to simultaneously redirect and execute a function using asynchronous JavaScript?

Ways to transfer a jQuery variable value to a PHP variable

Vue.js compatibility issue with SelectBoxIt jq plugin causing malfunction

What could be the reason for the GET request not functioning properly in Node.js?

Determination of Array Size using Powershell

Searching in the Kendo Dropdown List using text and value