Filtering an array of objects with javascript

Question

I have a menu array called "items". It has submenus.

I need to filter the items with property "visible" equal 1. I don't know at run time how deep the hierarchy will be. I need a function returning a new array, with the next conditions:

1. Every non-matching object with no children, or no matches in children hierarchy, should not exist in output object
2. Every object with a descendant that contains a matching object, should remain
3. Only descendants with matching objects should remain

My question is similar to this post Recursively filter array of objects.

But it does not work to me. I have used the following function, but it´s not working:

const items = [ { icon: "mdi-view-dashboard", title: "Dashboard", to: "/", visible: 1, }, 
{ title: "Manutenção", icon: "mdi-hammer-screwdriver", to: "", visible: 1, 
 items: [ 
    { title: "Usuários", icon: "mdi-account", to: "/usuarios", visible: 1, }, 
    { title: "Cores", to: "", visible: 1, 
     items: [ 
       { title: "Cores da Fila", icon: "mdi-eyedropper-variant", to: "/coresfila", visible: 1, },
       { title: "Cores da Agenda", icon: "mdi-palette", to: "/coresagenda", visible: 1, }, 
       ], 
     }, 
    { title: "Tabelas Médicas", to: "", visible: 1, 
     items: [ 
       { title: "Convênios", icon: "mdi-clipboard-outline", to: "/convenios", visible: 1, }, 
       { title: "Planos", icon: "mdi-plus-box", to: "/planos", visible: 1, }, 
       { title: "Especialidades", icon: "mdi-format-font", to: "/especialidadescompletas", visible: 1, }, 
       { title: "Modelos de Atestados", icon: "mdi-account-details-outline", to: "/modelosAtestados", visible: 1, }, 
       {  title: "Modelos de Prescrições", icon: "mdi-account-edit-outline",  to: "/modelosPrescricoes",  }, 
       { title: "Cid-10", icon: "mdi-alphabetical", to: "/cid10", visible: 1, }, 
       { title: "Procedimentos", icon: "mdi-alarm-plus", to: "/procedimentos", visible: 1, }, 
       { title: "Materiais", icon: "mdi-table-of-contents", to: "/materiais", visible: 1, },
       { title: "Medicamentos", icon: "mdi-water", to: "/medicamentos", visible: 1, }, 
       { title: "Taxas", icon: "mdi-cash-100", to: "/taxas", visible: 1, }, 
      ], 
    }, 
  ], 
}, 
{ title: "Empresa", icon: "mdi-cash-100", to: "", visible: 1, 
 items: [ { title: "Perfil da Empresa", icon: "mdi-account-network-outline", to: "/perfilempresa", visible: 1, }, 
 { title: "Créditos SMS", icon: "mdi-cash-usd-outline", to: "/creditossms", visible: 1, }, 
 ], 
}, 
{ title: "Clientes", icon: "mdi-account-alert-outline", to: "/clientes", visible: 1, }, 
{ title: "Agenda", icon: "far fa-calendar-check", to: "/agenda", visible: 1, }, 
{ title: "Fila", icon: "mdi-account-multiple-check", to: "/fila", visible: 1, }, 
{ title: "Atendimento Médico", icon: "fas fa-user-md", to: "/atendimento", visible: 1, }, 
{ title: "Tela de Chamadas", icon: "mdi-play-network-outline", to: "/telao", visible: 1, }, 
{ title: "DICOM", icon: "mdi-radioactive-off", to: "/dicom", visible: 1, }, 
{ title: "Estatísticas", icon: "mdi-chart-box", to: "", visible: 1, 
items: [ { title: "Clientes", icon: "mdi-account-arrow-right", to: "", visible: 1, 
 items: [ { title: "Por convênios", icon: "mdi-poll", to: "/estat_cliente_por_convenios", visible: 1, }, 
 { title: "Por mês", icon: "mdi-poll", to: "/estat_cliente_por_mes", visible: 1, }, 
 ], 
}, 
{ title: "Faturamento", icon: "mdi-cash-usd", to: "", visible: 1, 
 items: [ { title: "Por convênios", icon: "mdi-poll", to: "/estat_faturamento_por_convenios", visible: 1, }, 
 { title: "Por mês", icon: "mdi-poll", to: "/estat_faturamento_por_mes", visible: 1, }, 
], }, 
], }, 
{ title: "Autorizações", icon: "mdi-microphone-variant", to: "/listaautorizacoes", visible: 1, }, 
{ title: "Faturamento", icon: "mdi-cash-usd", to: "", visible: 1, 
items: [ { title: "Nova Guia", icon: "mdi-cart-plus", to: "/guiasfaturas", visible: 0, }, 
{ title: "Lista Guias", icon: "mdi-tray-plus", to: "/listaguias", visible: 1, }, 
{ title: "Lote de Guias", icon: "mdi-bag-personal", to: "/loteguias", visible: 1, }, ], }, 
] 


function ofilter(arr) {
  var matches = [];
  if (!Array.isArray(arr)) return matches;

  arr.forEach(function(i) {
    if (i.visible && i.visible === 1) {
      matches.push(i);
    } else {
      let childResults = this.ofilter(i.items);
      if (childResults.length)
        matches.push(Object.assign({}, i, {
          items: childResults
        }));
    }
  });
  return matches;
}
console.log(ofilter(items))

Answer 1

Here's a recursive filter based on a recursive visibility check. This version preserves the nested structure:

const isVisible = item => item.visible
    || item.items?.some(isVisible)

const filterItems = items => {
    items.forEach(item => {
        if (item.items) item.items = filterItems(item.items)
    })

    return items.filter(isVisible)
}

console.log(filterItems(
    [
        { id: 'a', visible: 1 },
        { id: 'b', visible: 0 },
        {
            id: 'c',
            visible: 0,
            items: [
                { id: 'd', visible: 1 },
                { id: 'e', visible: 0 }
            ]
        },
        { id: 'f', visible: 1, items: [{ id: 'g', visible: 0 }] },
        { id: 'h', visible: 0, items: [{ id: 'i', visible: 0 }] },
    ]
))

Alternatively, here's a version that returns a flat array:

const filterItemsFlat = (items, results = []) => {
    items.forEach(item => {
        if (item.items) filterItemsFlat(item.items, results)
        if (item.visible) results.push(item)
    })

    results.forEach(r => delete r.items)

    return results
}

console.log(filterItemsFlat(
    [
        { id: 'a', visible: 1 },
        { id: 'b', visible: 0 },
        {
            id: 'c',
            visible: 0,
            items: [
                { id: 'd', visible: 1 },
                { id: 'e', visible: 0 }
            ]
        },
        { id: 'f', visible: 1, items: [{ id: 'g', visible: 0 }] },
        { id: 'h', visible: 0, items: [{ id: 'i', visible: 0 }] },
    ]
))

Answer 2

Another alternative to question:

 const items = [ 
  { icon: "mdi-view-dashboard", title: "Dashboard", to: "/", visible: 1, }, 
  { title: "Manutenção", icon: "mdi-hammer-screwdriver", to: "", visible: 0, 
   items: [ 
     { title: "Usuários", icon: "mdi-account", to: "/usuarios", visible: 1, }, 
     { title: "Cores", to: "", visible: 0}
   ]
  }
];

function ofilter(arr) {
  let r = [];     
  arr.forEach((i) => {
    if (i.visible == 1) {
      r.push(i);
    } 
    if (i.items) {  
      r.push(ofilter(i.items))
    }    
  })
  return r;
}

console.log('result:', ofilter(items))