How split inner array in array?

Question

I have an array of object. One object has an array inside.

var array = [{ a:'ai', b:'bi', c:['first','second','third']}]

I need to have above array to be like this:

[
[{ a:'ai', b:'bi', c:['first','second','third'], cSplit:'first'}],
[{ a:'ai', b:'bi', c:['first','second','third'], cSplit:'second'}],
[{ a:'ai', b:'bi', c:['first','second','third'], cSplit:'third'}]
]

I tried this code:

var array = [{ a:'ai', b:'bi', c:['first','second','third']}]
var newArr = [];
for( var i=0; i<array[0]['c'].length; i++ ){
 var innerArr = array;
 innerArr[0]['cSplit'] = array[0]['c'][i];
 newArr.push(innerArr);
}
console.log('newArr', newArr)

But it shows:

[
[{a: "ai", b: "bi", c: ['first','second','third'] , cSplit: "third"}],
[{a: "ai", b: "bi", c: ['first','second','third'] , cSplit: "third"}],
[{a: "ai", b: "bi", c: ['first','second','third'] , cSplit: "third"}]
]

Why cSplit doesn't get the first and second value?

• Axnyff: The problem is that you're mutating the same object, which is array[0].
• Atousa Darabi: @Axnyff You are right. thanks

Answer 1

let array = [{ a:'ai', b:'bi', c:['first','second','third']}]
let newArr = [];
for(let i = 0; i < array[0]['c'].length; i++ ) {
 newArr.push({ ...array[0], cSplit: array[0].c[i] })
}
console.log(newArr)

Answer 2

Try with this code

var array = [{ a:'ai', b:'bi', c:['first','second','third']}]
let result = array[0].c.reduce((acc, current) => {
 return acc.concat({...array[0], csplit: current})
}, [])
console.log(result);

• Axnyff: It looks like you're using reduce to do a map.
• Yves Kipondo: I use reduce to create a completely new array instead of updating the existing one
• Axnyff: map does not mutate either
• Yves Kipondo: map will return a new array of course, as the array on which the map should be perform is the value of array[0].c to have access to all the value. if You perform map on the value of array directly you'll have access to one item which is an Object and not first, second and first
• Axnyff: array[0].c.map(current => ({...array[0], csplit: current}) )

Answer 3

A different approach using map

var array = [{ a:'ai', b:'bi', c:['first','second','third']}]
 
var res = array.map((o)=>{return Object.values(o)[2].map(e => {
var newob = {...o}
newob.cSplit = e
 return newob
 }) 
})
 console.log(res)

Answer 4

This can be succinctly done with Array.prototype.map:

const array = [{ a:'ai', b:'bi', c:['first','second','third']}]
const result = array[0].c.map(c => [{...array[0], cSplit: c}])
console.log(result)