What is the best way to add items to arrays with matching titles?

Question

What is the best way to add items to arrays with matching titles?

I am currently working on a form that allows for the creation of duplicate sections. After submitting the form, it generates one large object. To better organize the data and make it compatible with my API, I am developing a filter function to group the duplicates into arrays.

For example:

// initial object


{
  question_10: ""
  question_10a: ""
  question_11_checkbox: false
  question_11_checkbox_copy_0: false
  question_11_checkbox_copy_1: true
  question_11_text: "110 Monroe St"
  question_11_text_copy_0: "186 Aspen Road"
  question_12_checkbox: false
  question_12_checkbox_copy_0: false
  question_12_text: "New York"
  question_12_text_copy_0: "South Orange"
  ...
}

// desired output


{
  question_10: ""
  question_10a: ""
  question_11_checkbox: false
  question_11_checkbox_copies: [
    { question_11_checkbox_copy_0: false } 
    { question_11_checkbox_copy_1: true }
  ]
  question_11_text: "101 Monroe St"
  question_11_text_copies: [
    { question_11_text_copy_0: "186 Aspen Road"}
  ]
  question_12_checkbox: false
  question_12_checkbox_copies: [
    { question_12_checkbox_copy_0: false}
  ]
  question_12_text: "New York"
  question_12_text_copies: [
    { question_12_text_copy_0: "South Orange"}
  ]

 ...
}

My progress so far involves filtering out the copies from the original object and creating arrays for them.


// filter out copy keys
const copiesKey = Object.keys(data).filter(key => key.includes('copy'));

const copy = {};

// create arrays for copies
copiesKey.map(copiedQuestion => {

  if (!(`${copiedQuestion.slice(0, copiedQuestion.length - 7)}_copies` in copy)) {
    copy[`${copiedQuestion.slice(0, copiedQuestion.length - 7)}_copies`] = [];
  }
});

However, I am facing difficulty in matching the objects to their respective arrays and pushing them.

For instance:


question_11_text_copies: [
  { question_11_text_copy_0: "186 Aspen Road" }
]

I have attempted to extract the last three keys of the copy_0 object and match it with the array name using array.filter, but it did not yield the expected results.

Can you provide guidance on how to correctly match the 'copy_n' objects to the corresponding array and push them?

javascript arrays typescript object

Answer 1

Answer №1

Although it may seem a bit outdated, one effective solution is to utilize a for...in loop in conjunction with regex pattern matching against the key.

const data = {
  question_10: "",
  question_10a: "",
  question_11_checkbox: false,
  question_11_checkbox_copy_0: false,
  question_11_checkbox_copy_1: true,
  question_11_text: "110 Monroe St",
  question_11_text_copy_0: "186 Aspen Road",
  question_12_checkbox: false,
  question_12_checkbox_copy_0: false,
  question_12_text: "New York",
  question_12_text_copy_0: "South Orange",
};

const copy_n = /^(.*)_copy_(\d+)$/;
const result = {};
for (const key in data) {
  const value = data[key];
  const match = key.match(copy_n);
  
  if (match) {
    const copies_key = `${match[1]}_copies`;
    const index = parseInt(match[2], 10);
    result[copies_key] ||= [];
    result[copies_key][index] = { [key]: value };
  } else {
    result[key] = value;
  }
}

console.log(result);

The regex pattern /^(.*)_copy_(\d+)$/ identifies any string that concludes with _copy_ followed by one or more digits. The segment before _copy_ is captured in group 1, while the digits following _copy_ are captured in group 2.

In cases of no match (else situation), we simply assign the value to the corresponding key.

If a match is found (if situation), we first establish the collection key (copies_key) and determine the appropriate index. Subsequently, we validate whether result[copies_key] is already defined (checking its truthiness). If not, we set it as an empty array and proceed to allocate an object at the correct position within the array using the provided index.

Answer 2

Although it may seem a bit outdated, one effective solution is to utilize a for...in loop in conjunction with regex pattern matching against the key.

const data = {
  question_10: "",
  question_10a: "",
  question_11_checkbox: false,
  question_11_checkbox_copy_0: false,
  question_11_checkbox_copy_1: true,
  question_11_text: "110 Monroe St",
  question_11_text_copy_0: "186 Aspen Road",
  question_12_checkbox: false,
  question_12_checkbox_copy_0: false,
  question_12_text: "New York",
  question_12_text_copy_0: "South Orange",
};

const copy_n = /^(.*)_copy_(\d+)$/;
const result = {};
for (const key in data) {
  const value = data[key];
  const match = key.match(copy_n);
  
  if (match) {
    const copies_key = `${match[1]}_copies`;
    const index = parseInt(match[2], 10);
    result[copies_key] ||= [];
    result[copies_key][index] = { [key]: value };
  } else {
    result[key] = value;
  }
}

console.log(result);

The regex pattern /^(.*)_copy_(\d+)$/ identifies any string that concludes with _copy_ followed by one or more digits. The segment before _copy_ is captured in group 1, while the digits following _copy_ are captured in group 2.

In cases of no match (else situation), we simply assign the value to the corresponding key.

If a match is found (if situation), we first establish the collection key (copies_key) and determine the appropriate index. Subsequently, we validate whether result[copies_key] is already defined (checking its truthiness). If not, we set it as an empty array and proceed to allocate an object at the correct position within the array using the provided index.

Answer 3

Answer №2

To condense the entries of an object into a new object, each key must be checked to see if it has a base key (preceding ""copy") using a RegExp with lookahead. If there is no base key, the key is added directly to the accumulator. If a base key exists, it is added to the appropriate "copies" array (creating one if necessary using Logical nullish assignment ??=) (TS playground).

const fn = obj => Object.entries(obj)
  .reduce((acc, [k, v]) => {
    const [baseKey] = k.match(/.*(?=_copy_)/) ?? [] // get the key from an item with copy
    
    if(!baseKey) acc[k] = v // if no baseKey add the item to the accumulator
    else {
      const copiesKey = `${baseKey}_copies`
      acc[copiesKey] ??= [] // if no copies key add a new one to the accumulator    
      acc[copiesKey].push({ [k]: v }) // create an object and push to the current copies key
    }
    
    return acc
  }, {})
  
const obj = {"question_10":"","question_10a":"","question_11_checkbox":false,"question_11_checkbox_copy_0":false,"question_11_checkbox_copy_1":true,"question_11_text":"110 Monroe St","question_11_text_copy_0":"186 Aspen Road","question_12_checkbox":false,"question_12_checkbox_copy_0":false,"question_12_text":"New York","question_12_text_copy_0":"South Orange"}
const result = fn(obj)

console.log(result)

Answer 4

To condense the entries of an object into a new object, each key must be checked to see if it has a base key (preceding ""copy") using a RegExp with lookahead. If there is no base key, the key is added directly to the accumulator. If a base key exists, it is added to the appropriate "copies" array (creating one if necessary using Logical nullish assignment ??=) (TS playground).

const fn = obj => Object.entries(obj)
  .reduce((acc, [k, v]) => {
    const [baseKey] = k.match(/.*(?=_copy_)/) ?? [] // get the key from an item with copy
    
    if(!baseKey) acc[k] = v // if no baseKey add the item to the accumulator
    else {
      const copiesKey = `${baseKey}_copies`
      acc[copiesKey] ??= [] // if no copies key add a new one to the accumulator    
      acc[copiesKey].push({ [k]: v }) // create an object and push to the current copies key
    }
    
    return acc
  }, {})
  
const obj = {"question_10":"","question_10a":"","question_11_checkbox":false,"question_11_checkbox_copy_0":false,"question_11_checkbox_copy_1":true,"question_11_text":"110 Monroe St","question_11_text_copy_0":"186 Aspen Road","question_12_checkbox":false,"question_12_checkbox_copy_0":false,"question_12_text":"New York","question_12_text_copy_0":"South Orange"}
const result = fn(obj)

console.log(result)

What is the best way to add items to arrays with matching titles?

Answer №1

Answer №2

Similar questions

Exploring the implementation of initiating paypal in NestJs using Jest testing framework

Creating a static Top Bar that remains unaffected by page refreshing using Ajax or any other method can be achieved by implementing JavaScript and CSS

Retrieve the image description using the file_picker_callback and image uploader in Tinymce

collaborate and coordinate a territory among various components on a map

What's the best way to vertically center a div with a 100% width and a set padding-bottom on the screen?

What is the best way to transmit data via $router.push in Vue.js?

typescript api overlooking the async await functionality

Using TypeScript, we can assign a JSON object to an extended class by leveraging the

What is the process of installing an npm module from a local directory?

Resolving the CORS preflight issue with Loopback API in Redux

Adjust the positioning of axisLeft labels to the left side

The ZIP file downloaded from NodeJS is corrupted and cannot be opened

Concerns with JavaScript Scope

What is the importance of adding the ".js" extension when importing a custom module in Typescript?

Tips for breaking up array elements across multiple "tr" tags

Can you clarify the meaning of "int" in this code snippet?

Creating unique parent-children category groupings in Excel VBA using collections and dictionaries - how can it be done?

How can I verify if my discord.js bot has the necessary permissions from a server or channel?

"Discover the process of retrieving a specific element from a JSON array within PL/SQL Oracle 12c

Adding new data to a Chart.js line graph in vue on form submission - A step-by-step guide