How to remove hidden element from the array using recursive method

Question

I am using Tree structure to show the types which are not hidden. For this i am deleting the type for which hidden = true which working fine perfectly

var filtertypes = function (types) {
    for (var i = 0, l = types.length; i < l; i++) {
      var type = types[i];
      if (type && !type.hidden) {
        if (type.text) {
          type.n = type.text
          type.id = type.id;
        }
        if (type.children) {
          filtertypes(type.children);
        }
      } else {
         types.splice(i, 1);
         filtertypes(types);
      }
    }
    return types;
  };

But as this is not good to edit the data (ie types), so now i want to create a new array with only non-hidden values. So i want a function to which i provide a types as a data and it returns me all the types which are not hidden.

Note:- types structure is as follow

1    11    111
     12    121
     13
2    21    211
           212
     22    221 
           222
3    31    311
           312
     32    321 
           322

Suppose 13, 121, 21, 31, 32 are hidden i should get output as follows

[1,2,3]

Where 1.children should be should get [11, 12] #as 13 is hidden
        11.children should be [111]
        12.children should be nil #as 121 is hidden
        3.children should be nil #as 31, 32 are hidden

Answer 1

You have to create new Arrays and Objects in every place where you modified the original before:

var filtertypes = function (types) {
    var newTypes = [];
    for (var i = 0, l = types.length; i < l; i++) {
      var type = types[i];
      if (type && !type.hidden) {
        var newType = extend({}, type); //replace extend with Object.assign, angular.extend or similar
        if (type.children) {
          newType.children = filtertypes(type.children);
        }
        newTypes.push(newType);
      }
    }
    return newTypes;
  };

You could also look into immutable datastructures, immutable.js , which might be helpful.

Answer 2

function filterInputs(types){
        types = types.filter(function(type){
           if(type.hidden){
              return false;
           }
           if(type.children){
              filterInputs(type.children);
           }
           if(type.text){
              type.n = type.text
              type.id = type.id;
           }
           return true;
       });
    }

Just from my head. Probably needs to be tested and tweak a little.

Answer 3

Use the Array.prototype.filter() function mdn

(Don't forget to create a copy of the original object if it should not be modified)

    var types = [
    {nr:1, hidden:false, children:[
        {nr:11, hidden:false, children:[{nr:111, hidden:false}]},
        {nr:12, hidden:false, children:[{nr:121, hidden:true}]},
        {nr:13, hidden:true}
    ]},
    {nr:2, hidden:false, children:[
        {nr:21, hidden:true, children:[{nr:211, hidden:false}, {nr:212, hidden:false}]},
        {nr:22, hidden:false, children:[{nr:221, hidden:false}, {nr:222, hidden:false}]}
    ]},
    {nr:3, hidden:false, children:[
        {nr:31, hidden:true, children:[{nr:311, hidden:false}, {nr:312, hidden:false}]},
        {nr:32, hidden:true, children:[{nr:321, hidden:false}, {nr:322, hidden:false}]}
    ]}
];

// To ensure the original object tree isn't modified, deepclone it first
var copyOfTypes = JSON.parse(JSON.stringify(types))

// Filter the types array
var nonHiddenTypes = copyOfTypes.filter(filterTypes);

function filterTypes(type){
    if(type.hidden) {
        return false; // current item will NOT be in the new array
    }

    if(type.children) {
        type.children = type.children.filter(filterTypes); // recursive filter the children
    }

    return true; // current item will be in the new array
}

See JSFiddle