7

Eu tenho o seguinte JSON:

{
    "Empresas": [{
      "Name": "DIST",
      "Portais": [{
        "title": "PRD",
        "tags": ["PRD", "DIST1"]
      },{
        "title": "HIST",
        "tags": ["PCP", "DIST2", "DIST3"]
        }]
    },
     {"Name": "LUZ",
       "Portais": [{
         "title": "QA",
         "tags": ["QA", "LUZ"]
       }]
     }]
}

No meu navbar tem uma barra de pesquisa, que no momento só está filtrando uma tag, eu queria pesquisar por várias. Ex: "PCP DIST2".

Segue parte do código abaixo:

this.portais.forEach( (e: Empresa) => {
    var novoElemento = Object();
    novoElemento.Name = e.Name;

    novoElemento.Portais = e.Portais.filter(item => item.tags.find(i => i.toLocaleLowerCase().indexOf(val.toLowerCase())> -1));

    this.output_portais.push(novoElemento);

});

A variável 'val' se refere ao valor digitado no campo de pesquisa.

1
  • Filtrar mais de um, você quer procurar ambos (AND) ou qualquer um dos digitados (OU)? Commented 18/04/2020 às 2:16

1 Resposta 1

4

Se for digitado "PCP DIST2", você quer que filtre os elementos que tem ambas as tags "PCP" e "DIST2", ou pode ser os elementos que tenham pelo menos uma delas?


Independente do critério, uma forma de resolver é primeiro quebrar as tags em um array, usando split (mas antes uso toLowerCase() para transformá-las em minúsculas, pois vi que você quer fazer a consulta case insensitive, além de trim() para remover os espaços do início e fim da string, caso contrário o split retornará strings vazias no array):

let val = 'PCP DIST2';
let valores = val.trim().toLowerCase().split(' ');
console.log(valores); // ["pcp", "dist2"]

// se estiver separado por mais de um espaço, use:
val = '  PCP    DIST2  ';
valores = val.trim().toLowerCase().split(/\s+/);
console.log(valores); // ["pcp", "dist2"]

Em seguida, temos que decidir o critério. Se quisermos verificar que ambas as tags estão no array, temos que usar every (que verifica se todos os elementos satisfazem o critério). Mas se quisermos que qualquer uma das tags ( mas não necessariamente todas) estejam no array, usamos some (que verifica se algum dos elementos satisfaz o critério). E para verificar se o elemento está no array, usamos includes. Alguns exemplos:

let val = 'PCP DIST2';
let valores = val.trim().toLowerCase().split(' ');

// verificando se todas as tags estão no array
// array contém PCP e DIST2
console.log(valores.every(valor => ['PCP', 'ABC', 'DIST2'].map(s => s.toLowerCase()).includes(valor))); // true 
// array contém PCP, mas não DIST2
console.log(valores.every(valor => ['PCP', 'ABC', 'DIST1'].map(s => s.toLowerCase()).includes(valor))); // false 
// array não contém PCP nem DIST2
console.log(valores.every(valor => ['PC', 'ABC', 'DIST1'].map(s => s.toLowerCase()).includes(valor))); // false 

// verificando se alguma das tags está no array
// array contém PCP, mas não DIST2
console.log(valores.some(valor => ['PCP', 'ABC', 'DIST1'].map(s => s.toLowerCase()).includes(valor))); // true 
// array contém DIST2, mas não PCP
console.log(valores.some(valor => ['PC', 'ABC', 'DIST2'].map(s => s.toLowerCase()).includes(valor))); // true 
// array não contém PCP nem DIST2
console.log(valores.some(valor => ['PC', 'ABC', 'DIST1'].map(s => s.toLowerCase()).includes(valor))); // false 

Ou seja, para todos os valores da busca, eu verifico se todos (ou se algum deles, depende do critério) estão no array de tags.

Claro que você poderia usar indexOf, que retorna o índice do elemento (ou -1 se este não existir no array), mas como você só quer saber se o elemento existe ou não, usar includes é mais direto, pois retorna apenas true ou false.

Outro detalhe é que filter retorna um array vazio caso não encontre nenhum elemento que satisfaça o critério. Então você deve verificar se o array retornado está vazio antes de adicioná-lo nos resultados.

Sendo assim, no seu caso ficaria:

// para verificar se todas as tags estão no array
this.portais.forEach( (e: Empresa) => {
    var novoElemento = Object();
    novoElemento.Name = e.Name;
    novoElemento.Portais = e.Portais.filter(item => valores.every(valor => item.tags.map(s => s.toLowerCase()).includes(valor)));
    if (novoElemento.Portais.length > 0) { // só insiro se encontrou algum
        this.output_portais.push(novoElemento);
    }
});

// para verificar se alguma das tags está no array
this.portais.forEach( (e: Empresa) => {
    var novoElemento = Object();
    novoElemento.Name = e.Name;
    novoElemento.Portais = e.Portais.filter(item => valores.some(valor => item.tags.map(s => s.toLowerCase()).includes(valor)));
    if (novoElemento.Portais.length > 0) { // só insiro se encontrou algum
        this.output_portais.push(novoElemento);
    }
});

Repare também no uso de map para ter o array de tags todo em minúsculas.

1
  • 1
    A minha intenção era filtrar os elementos que tem ambas as tags, muito obrigada pela explicação, eu alterei aqui e funcionou exatamente como eu queria :)
    – Bruna
    Commented 18/04/2020 às 18:41

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .