Enter the site already with the little dolls

Question

Enter the site already with the little dolls

Asked 5 years, 7 months ago

Viewed 50 times

-1

Hello

I have a small problem that I can’t solve alone, basically when I enter the site appears like this:

And I wanted to get on the Site now with these little dolls:

The problem is that the dolls are generated through a script that are linked to the buttons and I wanted to enter the site already with the dolls without the select lose the function of reducing their number (number of the dolls) through the selected options.

Code:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>    

    <script type="text/javascript">

const urlIcon = 'https://1001freedownloads.s3.amazonaws.com/vector/thumb/74889/1367934593.png';
const imagem = `<img src="${urlIcon}" />`;

var json = [{
        "Nome": "Lucia Rodrigues",
        "Idade": 48,
        "Distrito": "Faro",
        "Faixa Etaria": "36 ou mais",
        "Faixa": "faixaD",
        "Sexo": "Fem",
        "RecursoArma": "Sim"
    },
    {
        "Nome": "Nome Desconhecido",
        "Idade": 46,
        "Distrito": "Açores",
        "Faixa Etaria": "36 ou mais",
        "Faixa": "faixaD",
        "Sexo": "Fem",
        "RecursoArma": "Não"
    },
    {
        "Nome": "Vera Silva",
        "Idade": 30,
        "Distrito": "Setúbal",
        "Faixa Etaria": "26-35",
        "Faixa": "faixaC",
        "Sexo": "Fem",
        "RecursoArma": "Não"
    },
    {
        "Nome": "Maria Eufrázia",
        "Idade": 83,
        "Distrito": "Évora",
        "Faixa Etaria": "36 ou mais",
        "Faixa": "faixaD",
        "Sexo": "Fem",
        "RecursoArma": "Sim"
    },
    {
        "Nome": "Luzia Rosado",
        "Idade": 80,
        "Distrito": "Évora",
        "Faixa Etaria": "36 ou mais",
        "Faixa": "faixaD",
        "Sexo": "Fem",
        "RecursoArma": "Sim"
    },
    {
        "Nome": "Fernanda",
        "Idade": 70,
        "Distrito": "Lisboa",
        "Faixa Etaria": "36 ou mais",
        "Faixa": "faixaD",
        "Sexo": "Fem",
        "RecursoArma": "Sim"
    },
    {
        "Nome": "Nome Desconhecido",
        "Idade": 48,
        "Distrito": "Açores",
        "Faixa Etaria": "36 ou mais",
        "Faixa": "faixaD",
        "Sexo": "Fem",
        "RecursoArma": "Não"
    },
    {
        "Nome": "Marina Mendes",
        "Idade": 25,
        "Distrito": "Viseu",
        "Faixa Etaria": "18-25",
        "Faixa": "faixaB",
        "Sexo": "Fem",
        "RecursoArma": "Sim"
    },
    {
        "Nome": "Helena Cabrita",
        "Idade": 60,
        "Distrito": "Madeira",
        "Faixa Etaria": "36 ou mais",
        "Faixa": "faixaD",
        "Sexo": "Fem",
        "RecursoArma": "Sim"
    },
    {
        "Nome": "Lana",
        "Idade": 2,
        "Distrito": "Madeira",
        "Faixa Etaria": "0-17",
        "Faixa": "faixaA",
        "Sexo": "Fem",
        "RecursoArma": "Sim"
    },
    {
        "Nome": "Fernando Cruz",
        "Idade": 60,
        "Distrito": "Porto",
        "Faixa Etaria": "36 ou mais",
        "Faixa": "faixaD",
        "Sexo": "Masc",
        "RecursoArma": "Não"
    },
    {
        "Nome": "Ana Maria Silva",
        "Idade": 53,
        "Distrito": "Açores",
        "Faixa Etaria": "36 ou mais",
        "Faixa": "faixaD",
        "Sexo": "Fem",
        "RecursoArma": "Sim"
    },
    {
        "Nome": "Ana Paula",
        "Idade": 40,
        "Distrito": "Braga",
        "Faixa Etaria": "36 ou mais",
        "Faixa": "faixaD",
        "Sexo": "Fem",
        "RecursoArma": "Não"
    },
    {
        "Nome": "Heila Lopes",
        "Idade": 44,
        "Distrito": "Lisboa",
        "Faixa Etaria": "36 ou mais",
        "Faixa": "faixaD",
        "Sexo": "Fem",
        "RecursoArma": "Não"
    }
    ]
    
    $(document).on("click", "#btnBuscar", function() {
  var filtroFaixaEtaria = $("#FaixaEtaria option:selected").text();
  var filtroSexo = $("#Sexo option:selected").text();
  var filtroRecursoArma = $("#RecursoArma option:selected").text();
  var filtroDistrito = $("#Distrito option:selected").text();

  var arrayResultados = json.filter(function(item) {
    var criteria = true;

    if (filtroFaixaEtaria != null && filtroFaixaEtaria != "")
      criteria = criteria && item["Faixa Etaria"] == filtroFaixaEtaria;
    if (filtroSexo != null && filtroSexo != "")
      criteria = criteria && item["Sexo"] == filtroSexo;
    if (filtroRecursoArma != null && filtroRecursoArma != "")
      criteria = criteria && item["RecursoArma"] == filtroRecursoArma;
    if (filtroDistrito != null && filtroDistrito != "")
      criteria = criteria && item["Distrito"] == filtroDistrito;

    return criteria;

  });

  console.log("Foram encontrados " + arrayResultados.length + " elementos de acordo com a busca");
  const imagens = Array.from({
    length: Number(arrayResultados.length)
  }).reduce((html) => html + imagem, '');
  $('#images').html(imagens);
});

$(document).on("click", "#btnLimpar", function() {
  $('#selectsfiltro').each (function(){
    this.reset();
  });

  var filtroFaixaEtaria = $("#FaixaEtaria option:selected").text();
  var filtroSexo = $("#Sexo option:selected").text();
  var filtroRecursoArma = $("#RecursoArma option:selected").text();
  var filtroDistrito = $("#Distrito option:selected").text();

  var arrayResultados = json.filter(function(item) {
    var criteria = true;

    if (filtroFaixaEtaria != null && filtroFaixaEtaria != "")
      criteria = criteria && item["Faixa Etaria"] == filtroFaixaEtaria;
    if (filtroSexo != null && filtroSexo != "")
      criteria = criteria && item["Sexo"] == filtroSexo;
    if (filtroRecursoArma != null && filtroRecursoArma != "")
      criteria = criteria && item["RecursoArma"] == filtroRecursoArma;
    if (filtroDistrito != null && filtroDistrito != "")
      criteria = criteria && item["Distrito"] == filtroDistrito;

    return criteria;

  });

  const imagens = Array.from({
    length: Number(arrayResultados.length)
  }).reduce((html) => html + imagem, '');
  $('#images').html(imagens);
});

    </script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form id="selectsfiltro">
    <h6>Faixa Etaria:</h6>
    <select id="FaixaEtaria" class="custom-select">
        <option></option>
        <option value="1">0-17</option>
        <option value="2">18-25</option>
        <option value="3">26-35</option>
        <option value="4">36 ou mais</option>
    </select>

    <br/>
    <br/> 
    <h6>Sexo:</h6>
    <select id="Sexo" class="custom-select">
        <option></option>
        <option value="5">Masc</option>
        <option value="6">Fem</option>
    </select>

    <br/>
    <br/>
    <h6>Recurso a arma:</h6>
    <select id="RecursoArma" class="custom-select">
        <option></option>
        <option value="7">Sim</option>
        <option value="8">Não</option>
    </select>


    <br/>
    <br/>
    <h6>Localidade:</h6>
    <select id="Distrito" class="custom-select">
        <option ></option>
        <option value="9">Viana do Castelo</option>
        <option value="10">Vila Real</option>
        <option value="11">Bragança</option>
        <option value="12">Braga</option>
        <option value="13">Porto</option>
        <option value="14">Aveiro</option>
        <option value="15">Viseu</option>
        <option value="16">Guarda</option>
        <option value="17">Coimbra</option>
        <option value="18">Castelo Branco</option>
        <option value="19">Leiria</option>
        <option value="20">Lisboa</option>
        <option value="21">Santarém</option>
        <option value="22">Portalegre</option>
        <option value="23">Évora</option>
        <option value="24">Setúbal</option>
        <option value="25">Beja</option>
        <option value="26">Faro</option>
        <option value="27">Açores</option>
        <option value="28">Madeira</option>
    </select>
</form>

<br/>
<br/>

    <button id="btnBuscar" class="btn btn-outline-warning">Filtrar</button>
    <button type="reset" id="btnLimpar" class="btn btn-outline-warning">Limpar Filtro</button>

PS: I changed the dolls inside this code because if you leave the others the site would not find them and would give error in the image.

Pq vc no longer starts with any Select option already selected type <option selected value="2">18-25</option> here you may have some interest https://answall.com/search?tab=votes&q=selected

– hugocsl

2019/05/16 at 11:02
@hugocsl because if you leave any of the selects with the Selected function my script as if it were one of the filters and interferes with the result later when filtering

– David Mv

2019/05/16 at 11:07

1 answer

Browser other questions tagged javascript html

You are not signed in. Login or sign up in order to post.

by Douglas Teles • **771** points · Answer 1 · 2019-05-16T11:00:56+00:00

Basically it is to run the Search function as soon as it loads, instead of waiting for the click:

  showPeople();

  function showPeople() {

    var filtroFaixaEtaria = $("#FaixaEtaria option:selected").text();
  var filtroSexo = $("#Sexo option:selected").text();
  var filtroRecursoArma = $("#RecursoArma option:selected").text();
  var filtroDistrito = $("#Distrito option:selected").text();

  var arrayResultados = json.filter(function(item) {
    var criteria = true;

    if (filtroFaixaEtaria != null && filtroFaixaEtaria != "")
      criteria = criteria && item["Faixa Etaria"] == filtroFaixaEtaria;
    if (filtroSexo != null && filtroSexo != "")
      criteria = criteria && item["Sexo"] == filtroSexo;
    if (filtroRecursoArma != null && filtroRecursoArma != "")
      criteria = criteria && item["RecursoArma"] == filtroRecursoArma;
    if (filtroDistrito != null && filtroDistrito != "")
      criteria = criteria && item["Distrito"] == filtroDistrito;

    return criteria;

  });

  console.log("Foram encontrados " + arrayResultados.length + " elementos de acordo com a busca");
  const imagens = Array.from({
    length: Number(arrayResultados.length)
  }).reduce((html) => html + imagem, '');
  $('#images').html(imagens);
  }