Ir para conteúdo
vinitf

Filtrar e contar elementos do array

Recommended Posts

Parece bem bobinho, mas sou iniciante, por isso me perdoem. Tenho uma lista com três empresas, e queria com um botão filtrar os dados (mostrar as que estão on e as que estão off) e com um outro botão contar quantas estão on e off  e mostrar na tela a quantidade). Sei que existem métodos exclusivos do JS, mas queria à princípio, utilizando for. 

<button onclick="fil()">Filtrar dados</button>
<p id="botão1"></p>
<button onclick="con()">Contar dados</button>
<p id="botão2"></p>
var dados = [{
  "Nome": "EMPRESA1",
  "Status": true
}, {
  "Nome": "EMPRESA2",
  "Status": false
}, {
  "Nome": "EMPRESA3",
  "Status": true
  }];


//filtrar os serviços com status igual ao parametro, NÃO USAR UNDERSCORE

function filtrar(Status) {
    return  dados.Status = true;
}

function fil() {
    document.getElementById("botão1").innerHTML = dados.filter(filtrar);
}

//contar a quantidade de serviços com status igual ao parametro, NÃO USAR UNDERSCORE

function contar(status) {
//for

}

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Vê se ajuda:

var dados = [{
  "Nome": "EMPRESA1",
  "Status": true
}, {
  "Nome": "EMPRESA2",
  "Status": false
}, {
  "Nome": "EMPRESA3",
  "Status": true
}];


//filtrar os serviços com status igual ao parametro, NÃO USAR UNDERSCORE

function filtrar() {
  document.getElementById("botao1").innerHTML = "";
  var filtro = dados.filter(function(item) {
    return item.Status === true;
  });
  console.log(filtro);
  for (var i in filtro) {
    document.getElementById("botao1").innerHTML = filtro[i].Nome + " = " + filtro[i].Status + "<br />";
  }
}

//contar a quantidade de serviços com status igual ao parametro, NÃO USAR UNDERSCORE

function contar(status) {
  document.getElementById("botao2").innerHTML = "";
  //for
  var contador = 0;
  for (var i in dados) {
    if (dados[i].Status === status) {
      contador++;
    }
  }
  document.getElementById("botao2").innerHTML = "Empresas " + status + ": " + contador;
}

jsFiddle.

  • +1 1

Compartilhar este post


Link para o post
Compartilhar em outros sites

Só complementando o meu amigo @wootzor.

 

 

Aqui basicamente temos um array [] de objetos {} em JS:

var dados = [
	{
	  "Nome": "EMPRESA1",
	  "Status": true
	}
	,{
	  "Nome": "EMPRESA2",
	  "Status": false
	}
	,{
	  "Nome": "EMPRESA3",
	  "Status": true
	}
];

O seu objetivo seria simplemente filtrar e exibir apenas  as chaves Status cujo o valor é true.

 

Para percorrer um array em JS temos diversas maneiras (for, forEach, map).

 

Vou exemplificar com o for in...

for(x in dados){
	if(dados[x]['Status']){
		//Só vai entrar aqui qnd o Status estiver true
	}
}

Ai para filtrar e exibir em tempo real precisa de alguns conhecimentos do JS...

Um exemplo pra ti, tentei deixar o mais simples possível porem dinâmico a ponto de você ver os estados se alternarem

https://jsfiddle.net/4f5wkvfw/

 

Pensando bem você poderia até fazer outros filtros... e intercalando eles.

 

<!-- Spoiler -->

Acabei viajando na ideia e tentar reproduzir aqueles filtros do Angular 1.x 

Da uma olhada no filtro de Nome + Status hehe

https://jsfiddle.net/h5o9Lfu5/

  • +1 2

Compartilhar este post


Link para o post
Compartilhar em outros sites

Os dois estão interessantes, mas @wootzor, como ficaria para mostrar os status de todas as empresas ao clicar no botão? Nesse exemplo aparece somente uma, e só se for true, caso contrário aparece a próxima.

 E @gabrieldarezzo, não teria uma forma mais simples de fazer essa busca pelo nome da empresa?

Compartilhar este post


Link para o post
Compartilhar em outros sites

Acredito que sim @vinitf

 

Se você observar a maioria da complexidade está em cima do Crossbrowser (Maldito IE), e a intercalação (Pode filtrar ao mesmo tempo status + nome)

 

Basicamente a unica parte que realmente filtra é essa:

 

var dadosCopy = dados.slice();

var filterNome = this.value;
if(filterNome != ''){
	
	var i = dadosCopy.length;
	while (i--) {
	
		var myRegex = new RegExp(filterNome, 'gi');
		
		if(dadosCopy[i]['Nome'].match(myRegex) ==  null){
			dadosCopy.splice(i, 1); // Remove o elemento
		}
	}
}

popDados(dadosCopy);

O splice faz uma copia para não perdermos a referencia dos dados originais.

Percorremos todos os elemetos do Array como o while (o motivo do while seria para utilziar dinamicamente o splice)

 

Efetuamos uma expressão regular, caso não encontre nada ( == null) retiramos aquele objeto do array.

E por fim chamamos uma função para popular o array copiado e filtrado ;)

 

Talvez exista alguma funções para deixar mais enxuto o código mas eu desconheço.

 

Live demo do simplificado:

https://jsfiddle.net/h5o9Lfu5/

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Recomendo fortemente ficar a vontade com as funções do JavaScript.

 

Recomendo muito a serie:

https://www.youtube.com/playlist?list=PLQCmSnNFVYnT1-oeDOSBnt164802rkegc

 

 

Ep de arrays:

https://www.youtube.com/watch?v=oUx0leLZSbY&list=PLQCmSnNFVYnT1-oeDOSBnt164802rkegc&index=9&t=101s

 

Ep de Expressão Regular:

https://www.youtube.com/watch?v=9r48XuOB4DA&list=PLQCmSnNFVYnT1-oeDOSBnt164802rkegc&index=10

 

 

Temos também a opção de 'filtros' em FrameWorks 

 

http://gabrieldarezzo.github.io/be_mean/aula4/

 

Exemplo do Angular 1x:

<tr data-ng-repeat="user in User.users | orderBy:predicate:reverse | filter:searchUser">
	<td data-ng-repeat="(key, value) in user">{{value}}</td>
</tr>

https://docs.angularjs.org/api/ng/filter/filter

Compartilhar este post


Link para o post
Compartilhar em outros sites

Foi apenas um exemplo (Algo a mais)

 

No Post: eu fiz um exemplo apenas de status + Explicações 

https://forum.imasters.com.br/topic/557040-filtrar-e-contar-elementos-do-array/?do=findComment&comment=2222305

 

a demo da filtragem apenas pelo status está aqui:

https://jsfiddle.net/4f5wkvfw/

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Agora me exigiram filtrar os dados, mas só retornando, sem precisar imprimir, e usando for. Estou no caminho?

function filtrar(status) {
  var a = 0;
  var lista = [];
  var x = this.length;
  for (var i = 0; i < x; i++) {
    return lista;
  }
  if (dados[i].Status === status) {
  //???
  a += dados[i];
  return a;
}
}

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar Agora

  • Conteúdo Similar

    • Por _badi_
      Preciso de ajuda! Pode parecer uma dúvida besta, mas sou nova nessa área e não estou conseguindo resolver essa questão da facul!
      A questão é:
      1)      Faça o fluxograma e depois faça o código em Javascript de um programa  que lê  3 notas obtidas por um aluno e depois calcule  e imprima a média dos para avaliação, usando  a fórmula abaixo. Imprimir depois o conceito, conforme a tabela abaixo. Use o prompt no javascript e um botão que mostre a média e o conceito depois que do clique no mesmo.
      MA = (Nota1 + Nota2 x 2 + Nota3 x 3 + ME )/7
      Média de Aproveitamento
      Conceito
      10
      A
      7,5 e < 10
      B
      4,0 e < 7,5
      C
      < 4,0
      D
       
      Meu código ficou assim:
      <!DOCTYPE html> <html> <head>      </head> <body> Para calcular sua media e saber seu conceito, clique no botao abaixo: <br> <br> <button onclick='mostra()'>Try it</button> <p id="resp"></p> <br> <br> <script>     function mostra(){         var nota1 = prompt ("Digite a nota 1");         var resp1 = parseInt (nota1);         var nota2 = prompt ("Digite a nota 2");         var resp2 = parseInt (nota2);         var nota3 = prompt ("Digite a nota 3");         var resp3 = parseInt (nota3);         var ME = (resp1 + resp2 + resp3)/3;         var MA = resp1 + (resp2 * 2) + (resp3 * 3) + ME/7;         if (MA=10) {             document.getElementById("resp").innerHTML=("Sua media foi " + ME + " e seu conceito foi A!");         } else if (MA=7.5&&MA<10){             document.getElementById("resp").innerHTML=("Sua media foi " + ME + " e seu conceito foi B!");         } else if (MA=4&&MA<7.5){             document.getElementById("resp").innerHTML=("Sua media foi " + ME + " e seu conceito foi C!");         } else if (MA<4){             document.getElementById("resp").innerHTML=("Sua media foi " + ME + " e seu conceito foi D!");         }         }          </script> </body> </html>  
      Mas sempre volta como conceito A, não importa os valores que coloco :(
      Obrigado!
       
    • Por Eduardo S. B. de Oliveira
      Senhores, preciso de uma ajuda, estou criando um formulário onde o checkbox fique "checked" quando clicar em cima, mas o detalhe e que quando atualizar a pagina o checkbox permaneça marcado. É possível? 
    • Por alh
      Estou seguindo as especificações corretamente do git. https://github.com/opencartbrasil/opencart-rest-api/blob/master/README.md
      Estou tendo o erro ao acessar minha página de integração:
      ERRO: Not found (entity)
      Ao acessar minha página que contém o seguinte código: categorias.php
       
      No arquivo abaixo estou colocando a minha KEY e domínio correto.
      <?php $headers = array(); $headers[] = 'Content-Type: application/json'; $headers[] = 'key: MINHAKEY'; // // Replace key value for API key OpenCart (Only numbers and letters) $ch = curl_init(); curl_setopt_array($ch, [ CURLOPT_URL => 'http://www.NOMEDOMEUDOMINIO.com.br/api.php/categories', // Replace domain and table name CURLOPT_HTTPHEADER => $headers, CURLOPT_CUSTOMREQUEST => 'GET', CURLOPT_RETURNTRANSFER => true, CURLOPT_SSL_VERIFYHOST => false, CURLOPT_SSL_VERIFYPEER => false ]); $out = curl_exec($ch); curl_close($ch); print_r( $out ); // Result json ?>
    • Por gleidsonb12
      Bom dia amigos, estou iniciando no javascript e tenho seguinte problema, preciso que o javascript mostre uma campo justificativa se a data selecionada no input for superior a 5 dias da data atual.
       
      O script que estou tentando dazer funcionar é este:
       
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script> <script> function obtemMes() { var mes = document.getElementById("dataselecionada").value; if (mes<>"2019-03-15"){document.getElementById("mes").style.display = "none";} </script> <div class="form-group col-md-3"> <label>Data</label> <input type="date" id="dataselecionada" class="form-control" onchange="obtemMes()"> </div> <div class="form-group col-md-3" id="mes"> <label>Mes</label> <input type="text" class="form-control"> </div> Qualquer ajuda é bem vinda
    • Por rxmarti
      Saudações, sou novo no forum, mas não em pesquisas e este tem me ajudado muito em meus estudos, mas esbarrei em um problema e não estou encontrando uma solução que eu entenda seu funcionamento, o problema:
       
      O form que estou desenvolvendo em PHP possuí alguns campos checkbox e através de jvs eu consigo habilitá-los ou não por opção sim ou não (radio + onclick):
      <script>
      function enbl(form)
       {
          form.x_daye[0].disabled = false;
          form.x_daye[1].disabled = false;
          form.x_daye[2].disabled = false;
       }
       function disbl(form)
       {
          form.x_daye[0].disabled = true;
          form.x_daye[1].disabled = true;
          form.x_daye[2].disabled = true;
       }
                          
      </script>";  
      <input type=radio name=v_mandaemail value=NAO onClick=disbl(this.form)>NAO
      <input type=radio name=v_mandaemail value=SIM onClick=enbl(this.form)>SIM
           
      <input type=checkbox id=x_daye name=v_exc_day[] value=arq1>arq1
      <input type=checkbox id=x_daye name=v_exc_day[] value=arq2>arq2
      <input type=checkbox id=x_daye name=v_exc_day[] value=arq3>arq3
      ...
       
      Bom, isso está funcionando, mas se houver mais arquivos(arq*) e esta quantidade for listada em um  "while" , como posso fazer que a mesma função oriente qualquer checkbox listado.
       
      Muito grato
       
      RM
       
       
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.