map nested array in javascript

Question

I have a nested array of objects like this:

let data = [
  {
      id: 1,
      title: "Abc",
      children: [
          {
              id: 2,
              title: "Type 2",
              children: [
                  {
                      id: 23,
                      title: "Number 3",
                      children:[] /* This key needs to be deleted */
                  }
              ]
          },
      ]
  },
  {
      id: 167,
      title: "Cde",
      children:[] /* This key needs to be deleted */
  }
]

All I want is to recursively find leaves with no children (currently an empty array) and remove the children property from them.

Here's my code:

normalizeData(data, arr = []) {
    return data.map((x) => {
        if (Array.isArray(x))
            return this.normalizeData(x, arr)
        return {
            ...x,
            title: x.name,
            children: x.children.length ? [...x.children] : null
        }
    })
}

Your efforts till now ?

Code Maniac
– Code Maniac

2019-01-26 14:10:19 +00:00
Commented Jan 26, 2019 at 14:10 — Code Maniac
– Code Maniac, Commented Jan 26, 2019 at 14:10
added code, please take a look

Amir Shahbabaie
– Amir Shahbabaie

2019-01-26 14:13:20 +00:00
Commented Jan 26, 2019 at 14:13 — Amir Shahbabaie
– Amir Shahbabaie, Commented Jan 26, 2019 at 14:13

nicholaswmin · Accepted Answer · 2019-01-26 14:14:22Z

4

You need to use recursion for that:

let data = [{
    id: 1,
    title: "Abc",
    children: [{
      id: 2,
      title: "Type 2",
      children: [{
        id: 23,
        title: "Number 3",
        children: [] /* This key needs to be deleted */
      }]
    }]
  },
  {
    id: 167,
    title: "Cde",
    children: [] /* This key needs to be deleted */
  }
]

function traverse(obj) {
  for (const k in obj) {
    if (typeof obj[k] == 'object' && obj[k] !== null) {
      if (k === 'children' && !obj[k].length) {
        delete obj[k]
      } else {
        traverse(obj[k])              
      }
    }
  }
}

traverse(data)
console.log(data)

answered Jan 26, 2019 at 14:14

nicholaswmin

23.2k16 gold badges103 silver badges175 bronze badges

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

Comments

Jeto · Accepted Answer · 2019-01-26 19:33:58Z

3

Nik's answer is fine (though I don't see the point of accessing the children key like that), but here's a shorter alternative if it can help:

let data = [
  {id: 1, title: "Abc", children: [
    {id: 2, title: "Type 2", children: [
      {id: 23, title: "Number 3", children: []}
    ]}
  ]},
  {id: 167, title: "Cde", children: []}
];

data.forEach(deleteEmptyChildren = o => 
  o.children.length ? o.children.forEach(deleteEmptyChildren) : delete o.children);

console.log(data);

If children is not always there, you can change the main part of the code to:

data.forEach(deleteEmptyChildren = o => 
  o.children && o.children.length 
    ? o.children.forEach(deleteEmptyChildren) 
    : delete o.children);

edited Jan 26, 2019 at 19:33

answered Jan 26, 2019 at 14:20

Jeto

15k2 gold badges39 silver badges50 bronze badges

6 Comments

Ivan Over a year ago

That's a very nice solution

Code Maniac Over a year ago

This will fail if there is no children key in object

epascarello Over a year ago

I am just not a fan of the extra loop to initialize it.

Jeto Over a year ago

@CodeManiac Well looking at OP's input, it seems like it's always here even when it's empty (that's why he wants to remove them to begin with). Code's easily adjustable though if that's not the case.

epascarello Over a year ago

@CodeManiac e.children && e.children.length solves the issue so not a big deal

|

epascarello · Accepted Answer · 2019-01-26 14:41:33Z

Simple recursion with forEach is all that is needed.

let data = [{
    id: 1,
    title: "Abc",
    children: [{
      id: 2,
      title: "Type 2",
      children: [{
        id: 23,
        title: "Number 3",
        children: [] /* This key needs to be deleted */
      }]
    }, ]
  },
  {
    id: 167,
    title: "Cde",
    children: [] /* This key needs to be deleted */
  }
]

const cleanUp = data =>
  data.forEach(n =>
    n.children.length
      ? cleanUp(n.children)
      : (delete n.children))
      
      
cleanUp(data)
console.log(data)

This assumes children is there. If it could be missing than just needs a minor change to the check so it does not error out on the length check. n.children && n.children.length

Code Maniac · Accepted Answer · 2019-01-26 14:50:20Z

2

You can do it like this using recursion.

So here the basic idea is in removeEmptyChild function we check if the children length is non zero or not. so if it is we loop through each element in children array and pass them function again as parameter, if the children length is zero we delete the children key.

let data=[{id:1,title:"Abc",children:[{id:2,title:"Type2",children:[{id:23,title:"Number3",children:[]}]},]},{id:167,title:"Cde",children:[]},{id:1}]

function removeEmptyChild(input){
  if( input.children && input.children.length ){
    input.children.forEach(e => removeEmptyChild(e) )
  } else {
    delete input.children
  }
  return input
}

data.forEach(e=> removeEmptyChild(e))

console.log(data)

edited Jan 26, 2019 at 14:50

answered Jan 26, 2019 at 14:38

Code Maniac

37.9k5 gold badges44 silver badges65 bronze badges

2 Comments

epascarello Over a year ago

why are you using map?

Code Maniac Over a year ago

@epascarello oh my bad. i overlooked use of map here. thanks for pointing out best case to use forEach

Collectives™ on Stack Overflow

map nested array in javascript

4 Answers 4

Comments

6 Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

6 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related