Tips for breaking apart elements of a JavaScript array when a specific delimiter is present in an object property

Question

Tips for breaking apart elements of a JavaScript array when a specific delimiter is present in an object property

I am facing a challenge with an array of objects where some properties contain commas. My goal is to split these properties into new objects and recursively copy the rest of the properties into new array elements.

For example, consider this original array:

[ { 
    prop1: ' text1 , text2 , text3 ',
    prop2: 'stuff1',
    prop3: 'stuff1',
    prop4: 'stuff1',
    prop5: 'https://www.stuff1.com' },

  { 
    prop1: ' text1 , text2 , text3 ',
    prop2: 'stuff2',
    prop3: 'stuff2',
    prop4: 'stuff2',
    prop5: 'https://www.awefewfew.com' },

 ]

We need to transform it into the following structure:

[ { 
    prop1: 'text1',
    prop2: 'stuff1',
    prop3: 'stuff1',
    prop4: 'stuff1',
    prop5: 'https://www.stuff1.com' },

    { 
    prop1: 'text2',
    prop2: 'stuff1',
    prop3: 'stuff1',
    prop4: 'stuff1',
    prop5: 'https://www.stuff1.com' },

    { 
    prop1: 'text3 ',
    prop2: 'stuff1',
    prop3: 'stuff1',
    prop4: 'stuff1',
    prop5: 'https://www.stuff1.com' },   

  { 
    prop1: 'text1',
    prop2: 'stuff2',
    prop3: 'stuff2',
    prop4: 'stuff2',
    prop5: 'https://www.awefewfew.com' },

      { 
    prop1: 'text2',
    prop2: 'stuff2',
    prop3: 'stuff2',
    prop4: 'stuff2',
    prop5: 'https://www.awefewfew.com' },

      { 
    prop1: 'text3',
    prop2: 'stuff2',
    prop3: 'stuff2',
    prop4: 'stuff2',
    prop5: 'https://www.awefewfew.com' },  
 ]

The idea is to split at prop1 and then recursively copy all other properties into the new array element.

Additionally, I managed to solve a similar problem in Google Sheets but had difficulty translating it to vanilla JavaScript:

function splitColumnAndRepeatRows(anArray, splitColumnIndex) {
  var output = [];
  for (i in anArray){ 
    var splitArray = anArray[i][splitColumnIndex].split(","); 
    for (j in splitArray){ 
      var row = anArray[i].slice(0); 
      row[splitColumnIndex] = alltrim(splitArray[j]); 
      output.push(row); 
    }
  }
  return output;
}

function alltrim(str) {
  return str.replace(/^\s+|\s+$/g, '');
}

javascript arrays json parsing split

Answer 1

Answer №1

I appreciate the efficiency of using array.concat in combination with reduce() and map() for this task. There are certainly multiple approaches to achieving the desired outcome. It's worth noting that the strings in your prop1 may not always be formatted with spaces, so a simple regex is used here to remove any unnecessary whitespace.

let arr = [ { prop1: ' text1 , text2 , text3 ',prop2: 'stuff1',prop3: 'stuff1',prop4: 'stuff1',prop5: 'https://www.stuff1.com' },{ prop1: ' text1 , text2 , text3 ',prop2: 'stuff2',prop3: 'stuff2',prop4: 'stuff2',prop5: 'https://www.awefewfew.com' },]

let final = arr.reduce((a, {prop1, ...obj}) => a.concat(
        prop1.trim()
        .split(/\s*,\s*/)
        .map(prop => ({prop1: prop, ...obj}))
    ), [])

console.log(final)

Answer 2

I appreciate the efficiency of using array.concat in combination with reduce() and map() for this task. There are certainly multiple approaches to achieving the desired outcome. It's worth noting that the strings in your prop1 may not always be formatted with spaces, so a simple regex is used here to remove any unnecessary whitespace.

let arr = [ { prop1: ' text1 , text2 , text3 ',prop2: 'stuff1',prop3: 'stuff1',prop4: 'stuff1',prop5: 'https://www.stuff1.com' },{ prop1: ' text1 , text2 , text3 ',prop2: 'stuff2',prop3: 'stuff2',prop4: 'stuff2',prop5: 'https://www.awefewfew.com' },]

let final = arr.reduce((a, {prop1, ...obj}) => a.concat(
        prop1.trim()
        .split(/\s*,\s*/)
        .map(prop => ({prop1: prop, ...obj}))
    ), [])

console.log(final)

Answer 3

Answer №2

Implement a solution using the .reduce method to loop through the provided data. This code snippet breaks down the values in prop1 by splitting them at each comma and then adding them to an array:

const input=[{prop1:' text1 , text2 , text3 ',prop2:'stuff1',prop3:'stuff1',prop4:'stuff1',prop5:'https://www.stuff1.com'},{prop1:' text1 , text2 , text3 ',prop2:'stuff2',prop3:'stuff2',prop4:'stuff2',prop5:'https://www.awefewfew.com'},]
const ouput = input.reduce((accum, { prop1, ...rest }) => {
  const prop1s = prop1.trim().split(' , ');
  prop1s.forEach(prop1 => accum.push({
    prop1,
    ...rest
  }));
  return accum;
}, []);
console.log(ouput);

Answer 4

Implement a solution using the .reduce method to loop through the provided data. This code snippet breaks down the values in prop1 by splitting them at each comma and then adding them to an array:

const input=[{prop1:' text1 , text2 , text3 ',prop2:'stuff1',prop3:'stuff1',prop4:'stuff1',prop5:'https://www.stuff1.com'},{prop1:' text1 , text2 , text3 ',prop2:'stuff2',prop3:'stuff2',prop4:'stuff2',prop5:'https://www.awefewfew.com'},]
const ouput = input.reduce((accum, { prop1, ...rest }) => {
  const prop1s = prop1.trim().split(' , ');
  prop1s.forEach(prop1 => accum.push({
    prop1,
    ...rest
  }));
  return accum;
}, []);
console.log(ouput);

Answer 5

Answer №3

Utilize the reduce, split, and forEach methods

let information = [
  {
    prop1: ' item1 , item2 , item3 ',
    prop2: 'details1',
    prop3: 'details1',
    prop4: 'details1',
    prop5: 'https://www.details1.com'
  },

  {
    prop1: ' item1 , item2 , item3 ',
    prop2: 'details2',
    prop3: 'details2',
    prop4: 'details2',
    prop5: 'https://www.awefewfew.com'
  }
]
let result = information.reduce((r, object) => {
  object.prop1.split(',').forEach(value => {
    r.push(Object.assign({}, object, { prop1: value.trim() }))
  })
  return r
}, [])
console.log(result)

Answer 6

Utilize the reduce, split, and forEach methods

let information = [
  {
    prop1: ' item1 , item2 , item3 ',
    prop2: 'details1',
    prop3: 'details1',
    prop4: 'details1',
    prop5: 'https://www.details1.com'
  },

  {
    prop1: ' item1 , item2 , item3 ',
    prop2: 'details2',
    prop3: 'details2',
    prop4: 'details2',
    prop5: 'https://www.awefewfew.com'
  }
]
let result = information.reduce((r, object) => {
  object.prop1.split(',').forEach(value => {
    r.push(Object.assign({}, object, { prop1: value.trim() }))
  })
  return r
}, [])
console.log(result)

Answer 7

Answer №4

Give this a shot:

let data = [{ 
    property1: ' value1 , value2 , value3 ',
    property2: 'stuff1',
    property3: 'stuff1',
    property4: 'stuff1',
    property5: 'https://www.stuff1.com' },
  { 
    property1: ' value1 , value2 , value3 ',
    property2: 'stuff2',
    property3: 'stuff2',
    property4: 'stuff2',
    property5: 'https://www.awefewfew.com' }];
    
 let newArray = [];   
 
 for (let index in data) {
   let splitValues = data[index].property1.split(',');
   
   splitValues.map(item => {
     newArray.push({
       "property1": item,
       "property2": data[index].property2,
       "property3": data[index].property3,
       "property4": data[index].property4,
       "property5": data[index].property5
     });
   });
 }
 
 console.log(newArray);

Answer 8

Give this a shot:

let data = [{ 
    property1: ' value1 , value2 , value3 ',
    property2: 'stuff1',
    property3: 'stuff1',
    property4: 'stuff1',
    property5: 'https://www.stuff1.com' },
  { 
    property1: ' value1 , value2 , value3 ',
    property2: 'stuff2',
    property3: 'stuff2',
    property4: 'stuff2',
    property5: 'https://www.awefewfew.com' }];
    
 let newArray = [];   
 
 for (let index in data) {
   let splitValues = data[index].property1.split(',');
   
   splitValues.map(item => {
     newArray.push({
       "property1": item,
       "property2": data[index].property2,
       "property3": data[index].property3,
       "property4": data[index].property4,
       "property5": data[index].property5
     });
   });
 }
 
 console.log(newArray);

Tips for breaking apart elements of a JavaScript array when a specific delimiter is present in an object property

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

The second pop-up modal fails to appear

You do not have permission to access the restricted URI, error code: 1012

Discover how ReactJS can dynamically display or hide div elements based on specific conditions being met within JSON data

Retrieving JSON information from asynchronous JavaScript and XML (AJAX)

Obtain the option tag's name

Refresh the Google Maps location using GPS coordinates

An error has occurred in the callback function for the watcher "function () { return this._data.$$state }": "Error: [vuex] It is forbidden to modify the vuex store state outside of a mutation"

Sending a Boolean value from a child component to its parent state in React JS

Use the document.getElementById function in JavaScript to dynamically retrieve elements based on user input in an HTML document. This will

How can I effectively monitor and track modifications to a document's properties in MongoDB?

There seems to be an issue with the messages array in the Chatfuel Json API plugin. While only a text object is

Is coffeescript supported by Moovweb?

Question: How can I use the jQuery datepicker to ensure that the selected date remains in the

Tips for implementing HTTP requests in Angular 2 without TypeScript

I'm struggling to understand how to interpret this. The v-tab function seems to be generating a button with various properties, but I'm unsure which specific property is related to

PUPPETER - Unpredictable pause in loop not functioning as expected

A solo-dimensional array generated within a PHP while loop

Event fails to trigger when attached to different elements

How do I make a component in React delete itself from a page when its internal state changes?

Different Categories of Array Deconstruction