Como exibir conteudo enquanto roda o LOOP em JAVASCRIPT

Programação
,
#1

Olá a todos, estou tentando rodar um loop com resultados do baco de dados que recebo por ajax, são quase cem mil resultados e a tela fica travada enquanto não carrega tudo e não exibe nada enquanto o loop não termina, gostaria de saber se tem algum modo ir exibindo os resultados durante a execução do loop, tipo rodou uma vez ai exibe oq rodou e roda a proxima

#2

Não programo em JavaScript, porém a maioria das linguagens de programação possuem métodos assíncronos ou async, que são métodos executados em tempo real, o que resolveria no seu caso.

#3

Posta o código

#4

É tipo assim

arr = [ //array com a massa de dados
          array1 = [ //categoria tem umas 10
         'subarr1' => [//linhas tem umas 3000 em cada categoria
                            'othersubarr1' => [//colunas tem umas 20 cada uma com um unico resultado
                                                    'resultado'
                                           ]
                      ]
        ]  
 ];

ai eu fiz o seguinte:

 for(var table in arr){ //cada categoria é uma table
        for(var linha in arr[table]){ //varrendo linha por linha de cada categoria
              for(var coluna in arr[table][linha]){
                     aqui vem o resultado // arr[table][linha][coluna]
               }
        }
 } // considere que tem 'n' validações e o desenrrolar da table entre os loops

o que acontece é que essa estrutura é muito pesada, e demora muito pra renderizar a pagina, pois o html da tabela só ta sendo gerado apos a conclusao do ultimo loop, não sou muito conhecedor do javascript sei da existencia de metodos assicronos porem não sei como usar ou aplicar kk queria que tipo qnd chegasse o primeiro resultado ele renderizasse e fosse pro segundo e assim por diante

#5

Dá uma olhada e veja se a ideia atende.

Qualquer sugestão para melhorar o código é bem vinda. Vlw!

<!DOCTYPE html>
<html>

<head>
	<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
	<meta content="utf-8" http-equiv="encoding">
	<title>Page Title</title>
</head>
	
<body>
	<p>Outra coisa na tela</p>
	
	<div id="dados">
		
	</div>
	
	<p>Outra coisa na tela</p>
	
	<script>
		const totalDados = 1000;

		// função que simula uma API para recuperar os dados e devolver uma promise
		function getDadosFake(page, totalPerPage) {
			const parcial = page * totalPerPage;

			const possuiMaisDados = (parcial <= totalDados);

			var dados = [];

			for (let i = parcial; i < (parcial + totalPerPage); i++) {
				dados.push(`data-${i}`);
			}
			
			return Promise.resolve({
				data: dados,
				possuiMaisDados: possuiMaisDados
			});
		}

		function getPage(page, callback) {
			console.log(`Page: ${page}`);
			
			// simular uma requisição com uma demora de 2 segundos
			setTimeout(function() {
				getDadosFake(page, 10).then(res => {
					callback(res.data);

					if (res.possuiMaisDados) {
						getPage(++page, callback);
					}
				});
			}, 2000);
		}

		getPage(1, (r) => {
			// simular alguma ação na tela com os dados obtidos
			var el = document.querySelector("#dados");
			el.appendChild(document.createTextNode(r.map(r => `${r}:`)));
			el.append(document.createElement('br'));
		});
	</script>
</body>

</html>
#6

é exatamente isso que eu to querendo, será que é possivel fazer isso com array multiplo? segue a baixo o meu codigo atual

content = JSON.parse(ret);
                for (var table in content) {//tabela
                    $("#table" + content[table][0] + " tbody").html('');
                    for (var row in content[table]) {//linha
                        if ($("#table" + content[table][0] + " tbody tr#" + row).length === 0 && row !== '0') {
                            $("#table" + content[table][0] + " tbody").append("<tr id='" + row + "'></tr>");
                            var tmp = '';
                            $("#table" + content[table][0] + " thead th").each(function () {
                                if ($("#table" + content[table][0] + " tbody tr#" + row + " td#" + row + $(this).attr('id')).length === 0) {
                                    $("#table" + content[table][0] + " tbody tr#" + row).append("<td id='" + row + $(this).attr('id') + "'>Sem informação</td>");
                                }
                            });
                        }
                        for (var column in content[table][row]) {//coluna
                            if (column === 'Situação') {
                                $("#table" + content[table][0] + " tbody tr#" + row + " td#" + row + column.replace(" ", "").replace(" ", "").split(" ")[0].replace("(", "").replace(")", "").replace("/", "").replaceAll(',','') + content[table][0]).html(content[table][row][column][0] === 100000162 ? "<i style='color: #2b9348' class='fa fa-circle'></i>" : "<i style='color: #2b9348' class='fa fa-circle'></i>");
                            } else {
                                $("#table" + content[table][0] + " tbody tr#" + row + " td#" + row + column.replace(" ", "").replace(" ", "").split(" ")[0].replace("(", "").replace(")", "").replace("/", "").replaceAll(',','') + content[table][0]).html(content[table][row][column][0]);
                            }
                        }
                    }

                }

super cheio de não melhores praticas :frowning:

#7

@walberst Como vc está recuperando esse ret ?

#9

os dados vem via ajax, na estrutura simulada a cima, com arrays aninhados, seria tipo

array( //MASSA DE DADOS
    array( //CATEGORIA 1
        array( //LINHAS (MAIS DE 1000)
            array( //COLUNAS (UMAS 20)
                //RESULTADO POR COLUNA (1 RESULTADO)
            )
        )
    )
    array( //CATEGORIA 2
        array( //LINHAS (MAIS DE 1000)
            array( //COLUNA (UMAS 20)
                //RESULTADO POR COLUNA (1 RESULTADO)
            )
        )
    )
// E POR AI VAI UMAS 10 CATEGORIAS
)

O ret é a massa de dados que vem por ajax