Navegar por itens de um array

[Rasp 3]

Fala galera! Estou com a seguinte situação e queria uma ajuda de pôr onde seguir o meu raciocínio para resolver:

 

Possuo um array X com dados que vem do meu backend, exemplo:

 

array = [
0: [1, 'Banana', '3.00', '...'],
1: [2, 'Maça', '4.00', '...'],
2: [3, 'Abacaxi', '5.00', '...']
];

Monto para o usuário uma tela com a tabela desses dados, com informações resumidas e um botão "detalhar" para exibir o conteúdo em um modal:

 

| ID | Fruta  | Preço| Ação     |

| 1  | Banana | 3.00 | Detalhar |
| 2  | Maça   | 4.00 | Detalhar |
| 3  | Abacaxi| 5.00 | Detalhar |

Até aí tudo certo, funciona redondo. Mas preciso fazer com que ao abrir o modal, independente do registro que cliquei (ID 1, 2 ou 3), eu possa "navegar" entre os outros registros no modal (possuo botões para isso) sem precisar sair do modal, como se fosse uma paginação.

 

Como poderia construir essa lógica?

[LucasLV 0]

Você pode criar uma variável global para armazenar o index atual do array, e sempre que avançar ou retornar um item, você incrementa ou decrementa essa variável.

[Rasp 3]

Em 22/08/2021 at 15:58, LucasLV disse:

Você pode criar uma variável global para armazenar o index atual do array, e sempre que avançar ou retornar um item, você incrementa ou decrementa essa variável.

 

@LucasLV o grande problema nesse caso é que um ID no meio do caminho pode simplesmente não existir, por exemplo, pelo registro ter sido removido. Com isso, não tenho como confiar no incremento ou decremento de uma variável global.

[Omar~ 87]

A questão aqui fica no encargo de como os dados trafegam do serve-side (backend) para o client-side (javascript).

Somente dizendo como você repassa esses valores você já tem 50% da questão resolvida.

 

Bom vendo isso presumo que seja um objeto uma vez que o javascript não usa arrays multi-dimensional:

Em 29/07/2021 at 10:56, Rasp disse:

 

array = [
0: [1, 'Banana', '3.00', '...'],
1: [2, 'Maça', '4.00', '...'],
2: [3, 'Abacaxi', '5.00', '...']
];

 

 

Como um objeto no geral nunca deveria ser indexado com um inteiro temos pegar o total de chaves dentro de um loop contando seus índices de acordo com a volta do loop, assim sendo fácil identificar qual chave do objeto temos o array para manipular.

 

<div id="botao_aqui"></div>

<div id="modal" style="display: none">
    <div id="resultado_aqui"></div>
</div>

<script>
    var objeto = {
        0: [1, 'Banana', '3.00', '...'],
        1: [2, 'Maça', '4.00', '...'],
        2: [3, 'Abacaxi', '5.00', '...']
    };

    var botaoAqui = document.getElementById('botao_aqui'),
        modal = document.getElementById('modal'),
        resultadoAqui = document.getElementById('resultado_aqui'),
        botao = null;

    for (var i = 0; i < Object.keys(objeto).length; i++) {
        botao = document.createElement('button');
        botao.innerHTML = 'Visualizar &gt; ' + objeto[i][1];
        /* No caso o id do array for 3 menos um então a chave o objeto é dois
         * E é atravéz desse numero que podemos regatar o array do objeto alvo
         * objeto[i][0] - 1) */
        botao.setAttribute('data-chave', (objeto[i][0] - 1));
        botao.addEventListener('click', abrirModal, false);
        botaoAqui.appendChild(botao);
    }

    function abrirModal(alvo) {
        var dados = objeto[(alvo.target).dataset.chave];
        resultadoAqui.innerHTML = '<p>ID(chave) : ' + dados[0] + '</p>'
                + '<p>Texto : ' + dados[1] + '</p>'
                + '<p>Preço : ' + dados[2] + '</p>'
                + '<p>Pontos : ' + dados[3] + '</p>';
        modal.removeAttribute('style');
    }
</script>

 

6 horas atrás, Rasp disse:

o grande problema nesse caso é que um ID no meio do caminho pode simplesmente não existir, por exemplo, pelo registro ter sido removido. Com isso, não tenho como confiar no incremento ou decremento de uma variável global.

Também nesse caso você vai se esbarrar nesse contexto, pois os dados já foram renderizados para o cliente, ou seja vão existir na tela dele mesmo que tenham sido alterados ou excluídos.

Então você tem duas alternativa:

1 - Ao invés de resgatar os dados já renderizados quando abrir o modal, você executa um ajax buscando essas informações, se elas não existirem mais você toma as medidas cabíveis de acordo com a sua necessidade.

2 - Usar um sistema como o socket.io por exemplo, para que quando essas informações sejam alteradas no servidor elas sejam renderizadas novamente para todos os usuários.