how to extract all objects from nested arrays into one array in React

Question

I have an array like this, which is the initial state of my useState:

Array [ (6) […], (6) […] ]

0: Array(6) [ undefined, {…}, {…}, … ]

1: Array(6) [ undefined, undefined, {…}, … ]

for example:

const[arr,setArr] = React.useState([
[
{label: "Beklam", id: 5032},
{label: "Dx6", id: 5052},
undefined,
undefined
],
[
{label: "item1", id: 50567},
{label: "item4", id: 505567},
{label: "item6", id: 50537},
{label: "itemA", id: 505647},
undefined,
undefined,
]
])

I want to make it like this:

[
{label: "Beklam", id: 5032},
{label: "Dx6", id: 5052},
{label: "item1", id: 50567},
{label: "item4", id: 505567},
{label: "item6", id: 50537},
{label: "itemA", id: 505647},
]

I should mention that undefined values came form inputs. in my case, it is possible to receive undefined and I should handle it.

this is from console.log output of browser. there's one array with two arrays inside of it. and each one of these 2 arrays have 6 elements inside of them. they can be more than 6. so the amount of elements are not static, as well as arrays.

the array can have multiple child arrays.

something like this:

0: undefined
1: undefined
2: Object { label: "Beklam", id: 5032 }
3: Object { label: "0/65%", id: 5061 }
4: undefined
5: undefined

I want to extract all objects inside of child arrays into one object. apparently extracting all values of those 2 arrays into a single array containing their objects.

and if possible, filtering undefined values and not showing them. instead of trying to use array.filter later on variable.

I actually haven't encountered a problem like this. so I don't really know how can I handle multi dimensional arrays.

can you give me a dummy array instead some random characters Array [ (6) […], (6) […] ]? — Layhout
– Layhout, Commented Dec 22, 2022 at 6:55
in addition to providing a clearer example of your input, can you please clarify what your expected output should look like? — Nick Parsons
– Nick Parsons, Commented Dec 22, 2022 at 6:58

Emilien · Accepted Answer · 2022-12-22 07:06:05Z

3

You can just use flatmap to make it into one dimensional array.

console.log(arr.flatMap((e) => e));

Or even simplier:

console.log(arr.flat());

And to filter out the undefined values:

console.log(arr.flatMap((e) => e.filter((f) => f !== undefined)));

edited Dec 22, 2022 at 7:06

answered Dec 22, 2022 at 7:00

Emilien

6391 gold badge8 silver badges19 bronze badges

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

4 Comments

Nick Parsons Over a year ago

This is equivalent to just .flat() since there is no mapping operation

Emilien Over a year ago

Had never heard of flat, thanks ! (I'll edit this answer)

Nick Parsons Over a year ago

No worries, looks like OP changed their quesiton/input, looks like you might be better off using .flatMap() again considering the new input (with an inner .filter())

SNMPT21344 Over a year ago

Thank you so much Emilien and @NickParsons. I was looking for it for a long.

ray · Accepted Answer · 2022-12-22 15:40:45Z

1

You can use flat to get it flattened into a single array.

You can use filter to remove the undefined entries.

const data = arr.flat(Infinity).filter(Boolean)

edited Dec 22, 2022 at 15:40

answered Dec 22, 2022 at 7:02

ray

27.3k5 gold badges31 silver badges30 bronze badges

2 Comments

Nick Parsons Over a year ago

You can also use .flat(Infinity) if you want to flatten arbitrary depths

ray Over a year ago

Indeed. Not sure why Infinity makes me nervous but it does.

Aslam khan · Accepted Answer · 2022-12-22 16:16:19Z

0

An another example using basic function of array like filter() and concat():

var arr = [
  [
    {label: "Beklam", id: 5032},
    {label: "Dx6", id: 5052},
    undefined,
    undefined
  ],
  [
    {label: "item1", id: 50567},
    {label: "item4", id: 505567},
    {label: "item6", id: 50537},
    {label: "itemA", id: 505647},
    undefined,
    undefined,
  ]
];
arr = arr[0].concat(arr[1]);
var arr2 = arr.filter(e => e != undefined && e);
console.log(arr2)

answered Dec 22, 2022 at 16:16

Aslam khan

3532 silver badges9 bronze badges

Collectives™ on Stack Overflow

how to extract all objects from nested arrays into one array in React

3 Answers 3

4 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related