flatten array and put child array into an array of object

Question

I struggled with a problem for more than an hour, how can I turn this nested array

[
 [
 {
 "name": "1",
 }
 ],
 [
 {
 "name": "a",
 },
 {
 "name": "b",
 }
 ]
]

into this:

[
 {
 name: '1',
 },
 {
 id: 'a-b',
 grouped: [
 {
 name: 'a',
 
 },
 {
 name: 'b',
 },
 ],
 },
 ]

I don't mind using lodash. Not sure should I flatten it before anything else would make things easier.

• Nina Scholz: what if you habe more than two items in the outer array? what have you tried?
• Andrei Cleland: Jenny, I have been coding for a year and a half. It's normal to struggle with a problem like this for an hour, and iron out the details. If you want to post to Stack Overflow you'll have to try harder, and demonstrate your efforts (what did you try?) preferably in a snippet (that will make it easy for people to copy into their answer). Try not to include emotions in your post (like "I struggled with a problem for more than an hour"). Name your objects and arrays. Good luck, and stay positive!
• Jenny Le: @NinaScholz normal foreach and push, deleted my code after few hrs.
• Andrei Cleland: Jenny it is a good practice to 'accept' (by clicking the tick) whichever answer is most helpful, or best solves your problem. If you do so, you will be awarded reputation points, and so will the coder who wrote the post.

Answer 1

You could use map() to form the id and grab the parts needed to reconstruct the new array.

const data = [
 [{
 "name": "1",
 }],
 [{
 "name": "a",
 },
 {
 "name": "b",
 }
 ]
];
const result = [
 ...data[0],
 {
 id: data[1].map(r => r.name).join("-"), 
 grouped: data[1]
 }
];
console.log(result);

• Andrei Cleland: nice code axtcknj, but it seems unlikely that Jenny will make head or tail of map, or the spread operator if she's just starting out.
• Jenny Le: data[1] wouldn't work, I can't do data[2], data[3] etc

Answer 2

to flatten the array is a good start. That will remove the superfluous dimension from the rawArray:

const newArray = array.flat()

Now you have an array with three simple objects. The first will remain unchanged. The second element of your finalArray needs to be an object, so let's create it:

const obj = {}

the obj has two keys: id and grouped. The property of id is a string that we can create like this:

obj.id = newArray[1].name + "-" + newArray[2].name 

the property of grouped remains the same:

obj.grouped = array[1]

so the finalArray is now straight forward:

const finalArray = [ newArray[0], obj ]

Put it all together in a function:

const rawArray1 = [
 [
 {
 "name": "1a",
 }
 ],
 [
 {
 "name": "a",
 },
 {
 "name": "b",
 }
 ]
]
const rawArray2 = [
 [
 {
 "name": "1b",
 }
 ],
 [
 {
 "name": "aa",
 },
 {
 "name": "bb",
 }
 ]
]
transformArray( rawArray1 )
transformArray( rawArray2 )
function transformArray( array ){
 const newArray = array.flat()
 const obj = {}
 obj.id = newArray[1].name + "-" + newArray[2].name 
 obj.grouped = array[1]
 const finalArray = [ newArray[0], obj ]
 console.log(finalArray)
 return finalArray
}

• axtcknj: I wouldn't flatten the initial array, that way there is no distinction between the first and second part, I think the second array can have a variable length, what if the array exists of 5 objects for example?
• Andrei Cleland: OP asked how to use flatten, so that's what I gave her
• Andrei Cleland: She needs to learn to explain what the second array 'might be' to get more meaningful answers
• axtcknj: Good point @Andrei!
• Jenny Le: you hardcoded the index, if I have more array of object? newArray[3]?

Answer 3

I managed to solve it using simple forEach, push, and flat. It's more simple than I thought, I was confused and stuck with map and reduce.

let result = [];
[
 [{
 "name": "1",
 }],
 [{
 "name": "a",
 },
 {
 "name": "b",
 }
 ]
].forEach((val) => {
 const [{
 name
 }] = val
 if (val.length === 1) {
 result.push({
 name,
 })
 } else if (val.length > 1) {
 result.push({
 id: val.map(val2 => val2.name).join('-'),
 grouped: val
 })
 }
})
console.log(result.flat())

• Andrei Cleland: Well done for sticking at it Jenny! I'm glad you found your own solution. However I'm sure most would agree that this answer is the most hard-coded! You have done well to destructure the first array using [{}], well done! I will arrange your code into a function, how I would do it.

Answer 4

const array1 = [
 [{ name: "1" }],
 [
 { name: "a" },
 { name: "b" }
 ]
]
const array2 = [
 [{ name: "2" }],
 [
 { name: "aa" },
 { name: "bb" },
 { name: "cc" }
 ]
]
transformArray( array1 )
transformArray( array2 )
function transformArray( array ){
 const result = []
 // destructure first array element for the first object:
 const [ nameObj ] = array[0]
 result.push( nameObj )
 
 // map each object of the second array element into an
 // an array of names, and then join the names together:
 const dataObj = {}
 dataObj.id = array[1].map(obj => obj.name).join('-')
 dataObj.grouped = array[1]
 result.push( dataObj )
 
 console.log( result )
 return result 
}