what is wrong in the array map iteration

Question

The Below code, not returning a flat array, is highly confusing, Need a flat array of deeply nested array of objects

have attached jsfiddle link https://jsfiddle.net/k6swuvox/

const arr = [{
  id: 1,
  name: 'XYZ 1'
}, {
  id: 2,
  name: 'XYZ 2',
  children: [{
    id: 5,
    name: 'XYZ 5'
  }, {
    id: 6,
    name: 'XYZ 6',
    age: 29,
    children: [{
      id: 7,
      name: 'XYZ 7'
    }, {
      id: 8,
      name: 'XYZ 8'
    }]
  }]
}, {
  id: 3,
  name: 'XYZ 3'
}, {
  id: 4,
  name: 'XYZ 4'
}]


const flats = data => data.map(e => {
  if (e.children) {
    return [...flats(e.children), e]
  } else {
    console.log("E", e);
    return e
  }
})

console.log(flats(arr));

Just calling flats(arr).flat() is sufficient in your code. — Ravikumar
– Ravikumar, Commented Apr 10, 2021 at 21:51

CertainPerformance · Accepted Answer · 2021-04-10 21:47:14Z

1

With your current code, you will sometimes return an array from the callback:

return [...flats(e.children),e]

and you'll sometimes return a plain object:

else {console.log("E",e);return e }

so the result will be a mix of arrays and plain objects, instead of an array of only objects.

Use flatMap instead, which will implement the flattening you're looking for for you. You'll also need to remove the .children property from items with children before returning them.

const arr=[{id:1,name:"XYZ 1"},{id:2,name:"XYZ 2",children:[{id:5,name:"XYZ 5"},{id:6,name:"XYZ 6",age:29,children:[{id:7,name:"XYZ 7"},{id:8,name:"XYZ 8"}]}]},{id:3,name:"XYZ 3"},{id:4,name:"XYZ 4"}];

const flats = data => data.flatMap(e=>{
  const { children, ...objWithoutChildren } = e;
  return children
    ? [...flats(children), objWithoutChildren]
    : e;
});

console.log(flats(arr));

answered Apr 10, 2021 at 21:47

CertainPerformance

373k55 gold badges354 silver badges359 bronze badges

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

1 Comment

CertainPerformance Over a year ago

When an answer solves your problem, you may consider upvoting and/or marking it as Accepted (check the checkbox on the left) to indicate that the issue is resolved :)

vincent · Accepted Answer · 2021-05-09 02:01:24Z

Here is an iterative solution using object-scan

// const objectScan = require('object-scan');

const arr = [{ id: 1, name: 'XYZ 1' }, { id: 2, name: 'XYZ 2', children: [{ id: 5, name: 'XYZ 5' }, { id: 6, name: 'XYZ 6', age: 29, children: [{ id: 7, name: 'XYZ 7' }, { id: 8, name: 'XYZ 8' }] }] }, { id: 3, name: 'XYZ 3' }, { id: 4, name: 'XYZ 4' }];

const flatten = objectScan(['**(^children$).id'], {
  useArraySelector: false,
  rtn: 'parent',
  reverse: false,
  afterFn: (state) => {
    state.result = state.result.map(({ id, name }) => ({ id, name }));
  }
});

console.log(flatten(arr));
// => [ { id: 1, name: 'XYZ 1' }, { id: 2, name: 'XYZ 2' }, { id: 5, name: 'XYZ 5' }, { id: 6, name: 'XYZ 6' }, { id: 7, name: 'XYZ 7' }, { id: 8, name: 'XYZ 8' }, { id: 3, name: 'XYZ 3' }, { id: 4, name: 'XYZ 4' } ]

.as-console-wrapper {max-height: 100% !important; top: 0}

<script src="https://bundle.run/[email protected]"></script>

Disclaimer: I'm the author of object-scan

Nguyễn Văn Phong · Accepted Answer · 2021-04-10 23:56:41Z

0

Need a flat array of deeply nested array of objects

In that case, I'd prefer recursive to get the flexible and high deep level array.

const arr = [{id:1,name:'XYZ 1'},{id:2,name:'XYZ 2',children:[{id:5,name:'XYZ 5'},{id:6,name:'XYZ 6',age:29,children:[{id:7,name:'XYZ 7'},{id:8,name:'XYZ 8'}]}]},{id:3,name:'XYZ 3'},{id:4,name:'XYZ 4'}];

const recursive = (array) => array.reduce((acc, {children = [], ...others}) => {
  acc.push(others);
  if(children.length > 0) // Base recurisve here.
    acc = acc.concat(recursive(children));
  return acc;
}, []);

console.log(recursive(arr));

==> As a result, the content structure will make sure like this

answered Apr 10, 2021 at 23:56

Nguyễn Văn Phong

14.2k19 gold badges47 silver badges65 bronze badges

1 Comment

Nguyễn Văn Phong Over a year ago

Yes. You can accept my answer by clicking the tick to help the reader in the future @yaayhai meta.stackexchange.com/questions/5234/…

Collectives™ on Stack Overflow

what is wrong in the array map iteration

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related