How to Split JavaScript Array Elements if an Object property has certain delimitter

Question

I have an array of objects and some of the objects have a property that has commas in it. What I want to do is if that object has a property that has commas in it, I want to split that into a new object and recursively copy all the other properties into a new array element.

Example: I need to convert this array of objects:

[ { 
    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' },

 ]

to this:

[ { 
    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' },  
 ]

By splitting at prop1, then recursively copying all the other properties into the new array element.

edit: I was able to figure it out actually in google sheets but couldn't quite port this over to vanilla JS:

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, '');
}

Have you tried anything so far? StackOverflow isn't a free code-writing service, and expects you to try to solve your own problem first. Please update your question to show what you have already tried, showing the specific problem you are facing in a minimal, complete, and verifiable example. For further information, please see how to ask a good question, and take the tour of the site — Jaromanda X
– Jaromanda X, Commented May 15, 2018 at 2:01
@Maxinef23 I added answer, hope it will work as per your expectation. Thanks — Rohìt Jíndal
– Rohìt Jíndal, Commented May 15, 2018 at 5:59

Mark · Accepted Answer · 2018-05-15 02:25:32Z

1

I like the succinctness of array.concat combined with reduce() and map() for this, but obviously there's a lot of ways to do it. It's not clear that your prop1 strings will always have spaces, so this uses a small regex to get rid of the them.

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)

answered May 15, 2018 at 2:25

Mark

92.6k8 gold badges116 silver badges156 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

CertainPerformance · Accepted Answer · 2018-05-15 02:02:42Z

1

Use .reduce to iterate over the input, split the prop1 by ,, then add each to the output 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);

answered May 15, 2018 at 2:02

CertainPerformance

373k55 gold badges354 silver badges359 bronze badges

Comments

xianshenglu · Accepted Answer · 2018-05-15 02:09:12Z

1

use reduce and split and forEach

let data = [
  {
    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 res = data.reduce((re, obj) => {
  obj.prop1.split(',').forEach(val => {
    re.push(Object.assign({}, obj, { prop1: val.trim() }))
  })
  return re
}, [])
console.log(res)

answered May 15, 2018 at 2:09

xianshenglu

5,4483 gold badges21 silver badges39 bronze badges

Comments

Rohìt Jíndal · Accepted Answer · 2018-05-15 05:59:03Z

1

Try this :

var jsonObj = [{ 
    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' }];
    
 var newArr = [];   
 
 for (var i in jsonObj) {
   var splitString = jsonObj[i].prop1.split(',');
   
   splitString.map(item => {
     newArr.push({
       "prop1": item,
       "prop2": jsonObj[i].prop2,
       "prop3": jsonObj[i].prop3,
       "prop4": jsonObj[i].prop4,
       "prop5": jsonObj[i].prop5
     });
   });
 }
 
 console.log(newArr);

answered May 15, 2018 at 5:59

Rohìt Jíndal

27.4k16 gold badges80 silver badges133 bronze badges

Collectives™ on Stack Overflow

How to Split JavaScript Array Elements if an Object property has certain delimitter

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related