1

Estou tentando criar um filtro de produtos recentes que são buscados (ao começar a digitar, ele já aparece os produtos encontrados, como se fosse um "like"), tenho uma variável global que é um array, e a partir dela eu salvo em outro array os dados do return item, como pode ser visto no exemplo abaixo:

produtosFiltrados: function() {

let articles_array = this.produtos;
let searchString = this.$myGlobalStuff.searchArray; //Global

searchString.map(searchString => searchString.trim().toLowerCase());

  articles_array2 = articles_array.filter(function(item) {
    if (item.nome.toLowerCase().indexOf(searchString) !== -1) {
      return item;
    }
  });

  return articles_array2;
}

Porém quando a minha variável this.$myGlobalStuff.searchArray possui mais de um item o meu articles_array2 sempre fica vazio quando é chamada a função.

Para entender melhor o problema, simulei o problema no link abaixo:

https://codepen.io/haykou/pen/gdZQJZ

Como pode ser visto se for adicionado um item na variavel

searchArray: ['dermodex']

O filtro não funciona mais.

2
  • Cria um snippet com um código funcional pra facilitar. Esse código que tu postou é um computedProperty? Um method? Commented 19/09/2018 às 20:13
  • vou tentar melhorar, é um computed
    – haykou
    Commented 19/09/2018 às 20:15

1 Resposta 1

3

Tentei reproduzir teu código no snippet abaixo. Pelo que pude perceber tem dois erros mais graves que impedem o funcionamento.

  1. Na linha:

    searchString.map(searchString => searchString.trim().toLowerCase());
    

    O método Array.map() retorna um novo array com o resultado do callback aplicado a todos os elementos do array. No seu caso, você está fazendo o cálculo e não está guardando o resultado em uma variável.

  2. Na linha:

    item.nome.toLowerCase().indexOf(searchString)
    

    O método String.indexOf() procura uma ocorrência de uma substring em outra string, mas pela lógica do seu código me parece que você quer usar o Array.indexOf() que tem função semelhante, porém procura pela ocorrência dentro de um array. Então acredito que o que você quer usar nessa linha seja:

    searchString.indexOf(item.nome.toLowerCase())
    

EDIT

Modifiquei o código para se comportar como um LIKE e como um OR. A função ficou assim:

function produtosFiltrados() {
    let sanitize = str => str.trim().toLowerCase();
    let strings = this.myGlobalStuff.searchArray.map(sanitize);

    return this.produtos.filter(function(item) {
        let nome = sanitize(item.nome);
        return strings.some(str => ~nome.indexOf(str));
    });
}

Explicação do código:

let sanitize = str => str.trim().toLowerCase();

Apenas salva a função que sanitiza as string, pois ela é usada mais de uma vez no código. Esta função poderia estar em outro lugar, fora da computedProperty (talvez até devesse).


let strings = this.myGlobalStuff.searchArray.map(sanitize);

Sanitiza todos os termos de pesquisa antes de usá-los.


return this.produtos.filter(function(item) {
    let nome = sanitize(item.nome);
    return strings.some(str => ~nome.indexOf(str));
});

É aqui onde tudo acontece:

  • this.produtos.filter(...) vai retornar um array apenas com os elementos cuja função retorne um valor truthy (que, quando convertido para boolean é verdadeiro). Ex.:

    // Filtra apenas os números ímpares
    [0, 1, 2, 3].filter(x => x % 2)  // [1, 3]
    
  • strings.some(...), o método Array.some(function) aplica a function nos elementos do Array e retorna true se qualquer um dos retornos da função seja truthy. Ou seja, funciona como um OR (e o Array.every(function) funciona como um AND, apenas para curiosidade). Ex.:

    // Testa se tem algum número ímpar no array
    [0, 1, 2, 3].some(x => x % 2)  // true
    [0, 2, 4, 6].some(x => x % 2)  // false
    
  • ~nome.indexOf(str), o método String.indexOf(substring) retorna a posição da substring dentro da string ou -1 caso a substring não exista dentro da string. Dito isso, para sabermos se a substring foi encontrada basta testarmos se x.indexOf(y) !== -1, porém, como curiosidade, se você converter -1 para uma representação binária você vai perceber que é um binário exatamente oposto do 0 (Ver sobre complemento de 2).

    (-1 >>> 0).toString(2) // "11111111111111111111111111111111"
    (0).toString(2)        // "00000000000000000000000000000000"
    

    Para entender o >>> 0 veja esta resposta do SOEn

    Então se você aplicar um NOT binário (com o operador ~), qualquer número diferente de -1 será !== 0 que é um valor truthy e o -1 será falso. Então, na conversão para boolean:

    x.indexOf(y) !== -1
    

    É equivalente a:

    ~x.indexOf(y)
    

Então a função:

return this.produtos.filter(function(item) {
    let nome = sanitize(item.nome);
    return strings.some(str => ~nome.indexOf(str));
});

Significa:

Filtre todos os produtos cujo nome contenha qualquer um dos termos de pesquisa.


Código funcionando:

new Vue({
    el: '#app',
    data: {
        myGlobalStuff: {  // fake da Global
            searchArray: ["1", "5"]
        },
        produtos: [
            {id: 1, nome: "Produto 1"},
            {id: 2, nome: "Produto 2"},
            {id: 3, nome: "Produto 3"},
            {id: 4, nome: "Produto 4"},
            {id: 5, nome: "Produto 5"},
            {id: 6, nome: "Produto 6"},
        ]
    },
    computed: {
        produtosFiltrados: function() {
            // Salva a função apenas por praticidade
            let sanitize = str => str.trim().toLowerCase();
            let strings = this.myGlobalStuff.searchArray.map(sanitize);
            
            return this.produtos.filter(function(item) {
                let nome = sanitize(item.nome);
                return strings.some(str => ~nome.indexOf(str));
            });
        }
    }
});
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<div id="app">
  <strong>Produtos</strong>
  <ul>
    <li v-for="p in produtos" :key="p.id">
      [{{ p.id }}] {{ p.nome }}
    </li>
  </ul>
  <strong>Produtos Filtrados</strong>
  <ul>
    <li v-for="p in produtosFiltrados" :key="p.id">
      [{{ p.id }}] {{ p.nome }}
    </li>
  </ul>
</div>

4
  • só uma duvida, no codepen que eu fiz, a função estava funcionando como um "like", inserindo apenas alguns caracteres no searchArray, ele já me retornava o resultado. Consigo fazer o mesmo com os ajustes que você fez?
    – haykou
    Commented 19/09/2018 às 23:05
  • Ah tá.. eu preciso modificar o código então. Não vou poder fazer isso agora, mas assim que eu fizer eu aviso aqui Commented 19/09/2018 às 23:22
  • tranquilo, estou tentando acertar aqui
    – haykou
    Commented 20/09/2018 às 15:23
  • Modifiquei o código para funcionar como um LIKE e um OR. A sessão EDIT contém toda a explicação das modificações Commented 21/09/2018 às 12:22

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 .