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.

what if you habe more than two items in the outer array? what have you tried? — Nina Scholz
– Nina Scholz, Commented Jul 20, 2022 at 8:34
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! — Andrei Cleland
– Andrei Cleland, Commented Jul 20, 2022 at 9:44
@NinaScholz normal foreach and push, deleted my code after few hrs. — Jenny Le
– Jenny Le, Commented Jul 20, 2022 at 14:31
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. — Andrei Cleland
– Andrei Cleland, Commented Jul 24, 2022 at 21:04

axtcknj · Accepted Answer · 2022-07-20 09:00:08Z

2

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);

edited Jul 20, 2022 at 9:00

answered Jul 20, 2022 at 8:44

axtcknj

3691 silver badge10 bronze badges

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

2 Comments

Andrei Cleland Over a year ago

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 Over a year ago

data[1] wouldn't work, I can't do data[2], data[3] etc

Andrei Cleland · Accepted Answer · 2022-07-21 02:37:38Z

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
}

edited Jul 21, 2022 at 2:37

answered Jul 20, 2022 at 9:33

Andrei Cleland

4465 silver badges11 bronze badges

6 Comments

axtcknj Over a year ago

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 Over a year ago

OP asked how to use flatten, so that's what I gave her

Andrei Cleland Over a year ago

She needs to learn to explain what the second array 'might be' to get more meaningful answers

axtcknj Over a year ago

Good point @Andrei!

Jenny Le Over a year ago

you hardcoded the index, if I have more array of object? newArray[3]?

|

Jenny Le · Accepted Answer · 2022-07-20 15:01:30Z

1

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())

answered Jul 20, 2022 at 15:01

Jenny Le

334 bronze badges

1 Comment

Andrei Cleland Over a year ago

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.

Andrei Cleland · Accepted Answer · 2022-07-21 03:54:23Z

1

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      
}

edited Jul 21, 2022 at 3:54

answered Jul 21, 2022 at 3:38

Andrei Cleland

4465 silver badges11 bronze badges

Collectives™ on Stack Overflow

flatten array and put child array into an array of object

4 Answers 4

2 Comments

6 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

6 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related