5
respostas

Filtro JavaScript com várias condições

Pessoal tenho que implementar esse filtro, e até o momento tenho esse código em JS, porém o filtro não está preciso, ele trás resultados que não estão setados, alguém me da um luz de como posso melhorar?

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

function filtrarFundos() {
    /** Buscar dados do formulario */
    const formData = new FormData(document.getElementById("filtroForm"));
    var estrategia = formData.get("estrategia");
    var esg = formData.get("esg");
    var perfil = formData.get("risco");
    var resgate = resgateSlider.noUiSlider.get();
    var aplicacao = aplicacaoSlider.noUiSlider.get();
    var objetivo = formData.get("objetivo");


    /** Busca dados da tabla **/
    var getTable = document.querySelector(".tabela-fundos");
    var getBodyTable = getTable.querySelector("tbody");
    var getTableRow = getBodyTable.getElementsByTagName("tr");

    for (i = 0; getTableRow.length > i; i++) {

        getTableRow[i].classList.add("d-none");
        var getTd = getTableRow[i].getElementsByTagName("td");

        for (j = 0; getTd.length > j; j++) {

            var dataType = getTd[j].getAttribute("data-type");
            var dataValue= getTd[j].getAttribute("data-value");

            if (dataType === "estrategia" && dataValue === estrategia) {
                getTableRow[i].classList.remove("d-none");
            }
            if (dataType === "perfil" && dataValue === perfil) {
                getTableRow[i].classList.remove("d-none");
            }
            if (dataType === "resgate" && dataValue >= resgate) {
                getTableRow[i].classList.remove("d-none");
            }
            if (dataType === "aplicacao-minima" && dataValue >= aplicacao) {
                getTableRow[i].classList.remove("d-none");
            }
            if (dataType === "esg" && dataValue === esg) {
                getTableRow[i].classList.remove("d-none");
            }
        }
    }


    //console.log(estrategia, esg, risco, resgate, aplicacao, objetivo)
    /** Necessario passar  essa função para fechar a modal do bootstrap*/
    modalFundos.hide();
}
<section class="container listagem-fundos">
    <div class="row">
        <div class="col-12 box-table">
            <table class="table tabela-fundos">
                <thead>
                <tr class="d-none d-lg-table-row">
                    <th scope="col">Fundo</th>
                    <th scope="col">PERFIL DE RISCO</th>
                    <th scope="col">ESTRATÉGIA</th>
                    <th scope="col">RESGATE</th>
                    <th scope="col">APL. INICIAL MÍNIMA</th>
                    <th scope="col">
                        <div class="col-12 d-flex align-items-center">
                            <button class="botaoEsg" onclick="btnEsg()">?</button>
                            ESG
                        </div>
                    </th>
                    <th scope="col"></th>
                </tr>
                <tr class="mobile d-lg-none">
                    <th scope="col"></th>
                    <th scope="col"></th>
                </tr>
                </thead>
                <tbody>
                <tr class="separador"></tr>
                <tr>
                    <th scope="row" class="fundo-imobiliario">
                        <div class="title">
                            Fundo de Investimento Imobiliário Brasílio Machado
                        </div>
                    </th>
                    <td class="d-none d-lg-table-cell" data-type="perfil" data-value="conservador1">Conservador 1</td>
                    <td class="d-none d-lg-table-cell" data-type="estrategia" data-value="imobiliario">Fundo Imobiliário</td>
                    <td class="d-none d-lg-table-cell" data-type="resgate" data-value="0">Não se aplica</td>
                    <td class="d-none d-lg-table-cell" data-type="aplicacao-minima" data-value="0">Não se aplica</td>
                    <td class="d-none d-lg-table-cell" data-type="esg" data-value="esg-ativo">
                        <div class="col-12 d-flex align-items-center">
                            <div class="col-12 d-flex align-items-center">
                                <button class="botaoEsg" onclick="btnEsg()">?</button>
                                ESG
                            </div>
                        </div>
                    </td>
                    <td><a href="#" class="btn btn-primary">Saiba mais</a></td>
                </tr>
                ....
5 respostas

Alguém?

Galera, ainda estou travado nessa questão, alguns dos professores pode elucidar?

Olá, Bruno! Tudo bem?

Você poderia informar qual o curso e compartilhar o link do projeto no github para que possa visualizar melhor?

Fico no aguardo!

Estou usando javascript puro, infelizmente não posso passar o acesso ao git, preciso implementar esse filtro com essas 5 condições, não achei nada assim com javascript puro por aqui...

Olá, Bruno! O ideal seria compartilhar o projeto e concluir os cursos, pois te dão uma excelente base para o que você deseja. No entanto separei algumas informações que te direcionam para a solução do problema.

Acredito que as informações nesse tópico irão te ajudar: Filtro em JavaScript.

Assim como o curso : JavaScript programando na linguagem web

E o github com o projeto de um filtro simples: Filtro simples em JavaScript

Um abraço e bons estudos!