The most effective method for transforming an array into an object in JavaScript using a prefixed value as the key

Question

The most effective method for transforming an array into an object in JavaScript using a prefixed value as the key

I am working with an array that contains prefix values

["options_a",
"options_b",
"options_c",
"capable_d",
"capable_e_c"
]

I am looking for a way to transform this array into an object format with the prefix as the key and the grouped split string as the value

The desired output format is:
{
"options":["a","b","c"],
"capable":["d","e_c"]
}

I understand that this can be achieved with a normal for loop, but I am wondering if there is a more simplified way using ES6 functionality.

Any suggestions would be greatly appreciated.

javascript arrays ecmascript-6

Answer 1

Answer №1

Shorten the array of values starting with a prefix. Separate each item by an underscore (_), then use destructuring to extract the key and an array of values (which may include multiple items after the split). If the accumulator (acc) does not have the key, create a new one with an empty array. Add the value to acc[key] after combining it with underscores.

const arr = ["options_a","options_b","options_c","capable_d","capable_e_c"]

const result = arr.reduce((acc, item) => {
  const [key, ...value] = item.split('_')
  
  if(!acc[key]) acc[key] = []
  
  acc[key].push(value.join('_'))

  return acc;
}, {})

console.log(result)

To eliminate the need for joining, use a RegExp to split only at the first underscore (refer to this answer):

const arr = ["options_a","options_b","options_c","capable_d","capable_e_c"]

const result = arr.reduce((acc, item) => {
  const [key, value] = item.split(/_(.+)/)
  
  if(!acc[key]) acc[key] = []
  
  acc[key].push(value)

  return acc;
}, {})

console.log(result)

Answer 2

Shorten the array of values starting with a prefix. Separate each item by an underscore (_), then use destructuring to extract the key and an array of values (which may include multiple items after the split). If the accumulator (acc) does not have the key, create a new one with an empty array. Add the value to acc[key] after combining it with underscores.

const arr = ["options_a","options_b","options_c","capable_d","capable_e_c"]

const result = arr.reduce((acc, item) => {
  const [key, ...value] = item.split('_')
  
  if(!acc[key]) acc[key] = []
  
  acc[key].push(value.join('_'))

  return acc;
}, {})

console.log(result)

To eliminate the need for joining, use a RegExp to split only at the first underscore (refer to this answer):

const arr = ["options_a","options_b","options_c","capable_d","capable_e_c"]

const result = arr.reduce((acc, item) => {
  const [key, value] = item.split(/_(.+)/)
  
  if(!acc[key]) acc[key] = []
  
  acc[key].push(value)

  return acc;
}, {})

console.log(result)

The most effective method for transforming an array into an object in JavaScript using a prefixed value as the key

Answer №1

Similar questions

Exploring the capabilities of Three.js Projector and Ray components

using javascript to animate multiple div elements

Creating a unique custom view in React Big Calendar with TypeScript

The API response was blocked due to the CORS header "Access-control-allow-origin."

Combining Arrays in MATLAB by Matching Specific Columns

Is there a way to establish communication between two ReactJS components by utilizing Jotai?

Tips for concealing the values within a selected dropdown list using jQuery

Using JQuery, you can toggle a newly created DIV element by linking it to `$(this)` instead of `$(this).closest()`

JavaScript shortening a string while joining it

Vue Bootstrap Checkbox and <b-table> with <b-form-checkbox> components combine to provide a powerful and flexible user

What is the best way to merge arrays from various ObservableObjects using combine?

Utilize JSON or an environment file to pass dynamic values to an npm script

Does Three.js lighting adjust according to the bundler used?

Struggling to understand the process of retrieving information from an Axios promise

The issue with onclientclick in Asp.Net button

How can a HTML element be clicked in JQuery to copy it into a text area?

Tips for showcasing several images with accompanying content once the webpage has finished loading

Retrieving CSV information from several files within a JavaScript directory

Using React client to accept messages from a Socket.io server: A guide

The variable 'props' is given a value but is never utilized - warning about unused variables in Vue 3