make images disappear depending on select

Question

Hello

I created a filter that basically reads my json and tells the number of victims in all depending on the options selected in the filter.

Using this filter, I’d like to remove some dummies that are on the right-hand side matching the number of victims found, something I can’t do...

BS: I don’t know what’s going on but every time I try to add a little script inside button, the button stops working.

Picture of my website:

the script I used to filter was this:

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"
}]

$("#btnBuscar").click(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;

  });

  alert("Foram encontrados " + arrayResultados.length + " elementos de acordo com a busca");

});

HTML of selects and images

    Faixa Etaria:  
    <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/>
 
    Sexo:
    <select id="Sexo" class="custom-select">
        <option></option>
        <option value="5">Masc</option>
        <option value="6">Fem</option>
    </select>

    <br/>
    <br/>

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


    <br/>
    <br/>

    Localidade:
    <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>

<br>

<button id="btnBuscar">Filtrar</button>

<br>
    
    <img class="imagens" id="imgA" src="/imagens/personagem4.png" height="55px" width="27px">
    <img class="imagens" id="imgB" src="/imagens/personagem4.png" height="55px" width="27px">
    <img class="imagens" id="imgC" src="/imagens/personagem4.png" height="55px" width="27px">
    <img class="imagens" id="imgD" src="/imagens/personagem4.png" height="55px" width="27px">
    <img class="imagens" id="imgE" src="/imagens/personagem4.png" height="55px" width="27px">
    <img class="imagens" id="imgF" src="/imagens/personagem4.png" height="55px" width="27px">
    <img class="imagens" id="imgG" src="/imagens/personagem4.png" height="55px" width="27px">
    <img class="imagens" id="imgH" src="/imagens/personagem4.png" height="55px" width="27px">
    <img class="imagens" id="imgI" src="/imagens/personagem4.png" height="55px" width="27px">
    <img class="imagens" id="imgJ" src="/imagens/personagem4.png" height="55px" width="27px">
    <img class="imagens" id="imgK" src="/imagens/personagem4.png" height="55px" width="27px">
    <img class="imagens" id="imgL" src="/imagens/personagem4.png" height="55px" width="27px">
    <img class="imagens" id="imgM" src="/imagens/personagem4.png" height="55px" width="27px">
    <img class="imagens" id="imgN" src="/imagens/personagem4.png" height="55px" width="27px">

Answer 1

Good day!

Probably what you want to do is something like, you create a condition (WHERE) where the numero_imagens = numero_vitimas

All the names I used are just examples...

Answer 2

You can generate these dolls every time the value of the dummy changes...

Something like that:

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"
  }
]

$("#btnBuscar").click(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);

});

#images {
  margin: 20px;
}

#images img {
  height: 35px;
  display: inline-block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Faixa Etaria:
<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/> Sexo:
<select id="Sexo" class="custom-select">
  <option></option>
  <option value="5">Masc</option>
  <option value="6">Fem</option>
</select>

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


<br/>
<br/> Localidade:
<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>

<br>

<button id="btnBuscar">Filtrar</button>

<br>

<div id="images"></div>

<!--
  <img class="imagens" id="imgA" src="/imagens/personagem4.png" height="55px" width="27px">
  <img class="imagens" id="imgB" src="/imagens/personagem4.png" height="55px" width="27px">
  <img class="imagens" id="imgC" src="/imagens/personagem4.png" height="55px" width="27px">
  <img class="imagens" id="imgD" src="/imagens/personagem4.png" height="55px" width="27px">
  <img class="imagens" id="imgE" src="/imagens/personagem4.png" height="55px" width="27px">
  <img class="imagens" id="imgF" src="/imagens/personagem4.png" height="55px" width="27px">
  <img class="imagens" id="imgG" src="/imagens/personagem4.png" height="55px" width="27px">
  <img class="imagens" id="imgH" src="/imagens/personagem4.png" height="55px" width="27px">
  <img class="imagens" id="imgI" src="/imagens/personagem4.png" height="55px" width="27px">
  <img class="imagens" id="imgJ" src="/imagens/personagem4.png" height="55px" width="27px">
  <img class="imagens" id="imgK" src="/imagens/personagem4.png" height="55px" width="27px">
  <img class="imagens" id="imgL" src="/imagens/personagem4.png" height="55px" width="27px">
  <img class="imagens" id="imgM" src="/imagens/personagem4.png" height="55px" width="27px">
  <img class="imagens" id="imgN" src="/imagens/personagem4.png" height="55px" width="27px">
-->