0

Eu sou novo como programador Javascript e estou com uma dificuldade que talvez para alguns não seja problema.

observem bem o código HTML;

<tbody>
              <tr v-for="bancodedado in filteredBancodedaos  ">
                <td>{{ bancodedado.name }}</td>
                <td>{{ bancodedado.height }}</td>
                <td>{{ bancodedado.mass }}</td>
                <td>{{ bancodedado.eye_color }}</td>
                <td>{{ bancodedado.gender }}</td>
                <td>{{ bancodedado.hair_color }}</td>
              </tr>
            </tbody>

Agora o código Javascript;

var app = new Vue({
  el: '#app',
  data: {
    bancodedados: [],
    MySearch:''

  },
  methods: {

  },
  created: function() {
    var self = this;
    self.$http.get('https://swapi.co/api/people/?format=json').then(function(response) {
      self.bancodedados = response.body.results;
    });
  },
  computed: {
      filteredBancodedaos () {
          return this.bancodedados.filter((bancodedado) => {
              return bancodedado.name.match(this.MySearch);
        })
      }
    }
});

Qual é o objetivo desse código? é filtrar pelo name

O código está funcionando perfeitamente.

o que estou precisando fazer é criar um controle de fluxo no código abaixo que possa ter condições de filtrar por name, height, mass, eye_color ou por gender.

pode ser qualquer controle de fluxe: if else, for, switch case ou qualquer outro.

computed: {
      filteredBancodedaos () {
          return this.bancodedados.filter((bancodedado) => {
              return bancodedado.name.match(this.MySearch);
        })
      }
    }

Eu tenho conseguido evoluir nesses estudo devido a algumas documentações encontradas na internet, mas nem tudo consigo encontrar... preciso muito de ajuda.

Essa foi minha tentativa;

computed: {
      filteredBancodedaos () {
          return this.bancodedados;
          .filter((bancodedado) => {
              return bancodedado.name.match(this.MySearch);
        })
        .filter((bancodedado) => {
              return bancodedado.height.match(this.MySearch);
        })
      }
    }

sendo que não tive sucesso :(

1 Resposta 1

0

_OLD____________________________________________________

um jeito de fazer é colocando filtros encadeados

filteredBancodedaos () {
  return this.bancodedados
    .filter(this.filtraPorNome)
    .filter(this.filtraPorAltura)
}

e assim por diante, colocando as funções de filtro dentro do objeto 'methods'.

A função filter ela é do javascript, recomendo uma lida nela: https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Array/filtro

_NEW_________________________________________________________ Pensei que você teria muitas variaveis para fazer a analise, no caso de ser apenas uma, um código como esse deve funcionar:

filteredBancodedaos () {
  return this.bancodedados
    .filter((bancoDeDado)=>{
      return ( 
        bancoDeDado.name.match(this.MySearch) ||
        bancoDeDado.height.match(this.MySearch) ||
        bancoDeDado.algumCampo.match(this.MySearch)
      )
    })
}

Outro jeito é rodar uma função que analisa todos as propriedades e ver se alguma dá match

function anyPropertyMatch(obj, value) {
  for(let i in obj) {
    if(typeof(obj[i]) == 'string' && obj[i].match(value)){
      //se algum der match retorna true, senão false
      return true;
    }
  }
  return false;
}



filteredBancodedaos () {
  return this.bancodedados
    .filter((item) => anyPropertyMatch(item, this.MySearch))
}
2
  • obrigado pelo apoio, sendo que não conseguir fazer, eu fiz uma atualização da minha postagem, poderia dá uma olhada por favor.
    – user10264
    21/09/2017 às 17:50
  • 1
    Do jeito que você implementou ele só irá retornar, se todos os campos derem Match com a pesquisa.. Vou colocar um trecho de código q deve funcionar para seu filtro na minha resposta anterior 22/09/2017 às 1:53

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