filter nested tree object without losing structure

Question

I have nested tree object I would like filter through without losing structure

var items = [
    {
        name: "a1",
        id: 1,
        children: [{
            name: "a2",
            id: 2,
            children: [{
                name: "a3",
                id: 3
            }]
        }]
    }
];

so for example if id == 2 remove object with id 2 and his children

if id == 3 only remove object with id 3

this's just apiece of object to make question clean but the object it self contains more and more :)

using vanilla javascript, _lodash or Angular2 it's okay

thank you

Answer 1

Use recursive function:

var items = [
    {
        name: "a1",
        id: 1,
        children: [{
            name: "a2",
            id: 2,
            children: [{
                name: "a3",
                id: 3,
                children: [{
                    name: "a4",
                    id: 4,
                }]
            }]
        }]
    }
];

function filterId(items, id) {
  var len = items.length;
  while (len--) {
    if (items[len].id === id) {
      items.splice(len, 1);
      break;
    } else {
      filterId(items[len].children, id);
    }
  }
  return items;
}

// filtering out the item with 'id' = 4
console.log(filterId(items, 4));

// filtering out the item with 'id' = 2
console.log(filterId(items, 2));

Answer 2

If it's ok for your case to use Lodash+Deepdash, then:

let filtered = _.filterDeep(items,(i)=>i.id!=3,{tree:true});

Here is a demo Codepen

Answer 3

You can create recursive function using filter() and also continue filtering children if value is Array.

var items = [{
  name: "a1",
  id: 1,
  children: [{
    name: "a2",
    id: 2,
    children: [{
      name: "a3",
      id: 3
    }, ]
  }]
}];

function filterData(data, id) {
  var r = data.filter(function(o) {
    Object.keys(o).forEach(function(e) {
      if (Array.isArray(o[e])) o[e] = filterData(o[e], id);
    })
    return o.id != id
  })
  return r;
}

console.log(filterData(items, 3))
console.log(filterData(items, 2))

Update: As Nina said if you know that children is property with array you don't need to loop keys you can directly target children property.

var items = [{
  name: "a1",
  id: 1,
  children: [{
    name: "a2",
    id: 2,
    children: [{
      name: "a3",
      id: 3
    }, ]
  }]
}];

function filterData(data, id) {
  var r = data.filter(function(o) {
    if (o.children) o.children = filterData(o.children, id);
    return o.id != id
  })
  return r;
}

console.log(JSON.stringify(filterData(items, 3), 0, 4))
console.log(JSON.stringify(filterData(items, 2), 0, 4))

Answer 4

You could use an iterative approach with Array#some and call the callback iter recursive for the children. I found, splice.

function deleteItem(id) {
    items.some(function iter(a, i, aa) {
        if (a.id === id) {
            aa.splice(i, 1);
            return true;
        }
        return a.children.some(iter);
    });
}

var items = [{ name: "a1", id: 1, children: [{ name: "a2", id: 2, children: [{ name: "a3", id: 3 }] }] }];

console.log(items);
deleteItem(3);
console.log(items);
deleteItem(2);
console.log(items);

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