Não consegui usar o comando for do JavaScript

[Frank K Hosaka 0]

Ontem estava fazendo um blade.php no Laravel para procurar um produto através do <datalist>. Eu não sei se o Laravel tem algo que substitua o <datalist>, mas eu resolvi usar o JavaScript, onde eu aprendi que o <option> tem um propriedade chamada data-id. Eu criei um array para a consulta, e usei a chave do array para definir o data-id do <option>, e pedi para o JavaScript exibir os dez próximos itens a partir do item selecionado através do comando for(contador=selecionado;contador<selecionado+9,selecionado++), mas ele acabou listando todos os produtos a partir do item selecionado.

 

Pensei que o problema era o ambiente Laravel, assim traduzi o blade.php em php, mas o problema continuou o mesmo. Para contornar, usei o comando forEach no lugar do for, e o código ficou assim:

 

<?php
$mysqli=new mysqli("localhost","root","","astudy");
$query=$mysqli->query("select * from tbprod order by prod");
$prod=$query->fetch_all(MYSQLI_ASSOC);?>
<script>
function procurar(valor){
    for(i=0;i<produtos.options.length;i++){
        if(produtos.options[i].value==valor){
            j=produtos.options[i].getAttribute('data-id');}}
    show(j);}
function show(j){
    divshow.innerHTML="";
    teste=[1,2,3,4,5,6,7,8,9,10]
    teste.forEach(function(){
    divshow.innerHTML+=produtos.options[j].value+"<br>";j++})}
</script>
<div><p><p>
<form>
<input list=produtos autofocus id=produto onchange=procurar(value) autofocus>
<datalist id=produtos>
<?php foreach($prod as $key=>$pr){echo "<option data-id=$key value='".$pr['prod']."'>";} ?>
</datalist></form></div>
<div id=divshow></div>
<script>show(0)</script>

 

[washalbano 54]

Olá!
Não consegui entender.
No final, conseguiu ou não?

[Frank K Hosaka 0]

8 horas atrás, washalbano disse:

Olá!
Não consegui entender.
No final, conseguiu ou não?

No codigo citado, se eu colocar 
 

<script>
function show(j){
    divshow.innerHTML="";
    for(i=j;i<j+9;i++){
    divshow.innerHTML+=produtos.options[i].value+"<br>"})}
</script>

ele não funciona, ao invés de listar apenas os dez itens solicitados, ele lista todo mundo, a partir do item selecionado.
Encontrei duas soluções:

<script>
function show(j){
    divshow.innerHTML+=produtos.options[j].value+"<br>";j++
    divshow.innerHTML+=produtos.options[j].value+"<br>";
    divshow.innerHTML+=produtos.options[j+1].value+"<br>";
    divshow.innerHTML+=produtos.options[j+2].value+"<br>";
    divshow.innerHTML+=produtos.options[j+3].value+"<br>";
    divshow.innerHTML+=produtos.options[j+4].value+"<br>";
    divshow.innerHTML+=produtos.options[j+5].value+"<br>";
    divshow.innerHTML+=produtos.options[j+6].value+"<br>";
    divshow.innerHTML+=produtos.options[j+7].value+"<br>";
    divshow.innerHTML+=produtos.options[j+8].value+"<br>";
}
</script>

e a outra solução foi usar o forEach como na primeira listagem. Note que eu não consegui colocar [j+1] na segunda linha!

[Omar~ 87]

2 horas atrás, Frank K Hosaka disse:

for(i=j;i<j+9;i++){

 

 

Não precisa ficar replicando a mesma coisa.... No caso esses montes de innerHTML aí

Então vamos parar um loop quando ele deve parar em uma determinada situação.

Primeiro tenha certeza que a variável j é mesmo um numero inteiro.

Você pode chamar a função passando o valor como integer exemplo:

show(j);

 

Exemplo básico:

var j = '13';
show( parseInt(j) );
    
function show(contar) {
    var parar = (contar + 10); // o valor do parâmeto mais 10 para que o loop seja executado 10 vezes
    for (; contar < parar; contar++) { // enquanto a contagem for menor que o valor de parada
        console.log('Contagem executada: ' + contar);
    }
}

Algumas ponderações:

A variável de parada não é ideal ficar dento da função show se essa função for chamada dentro de um loop haverá uma sobrecarga de calculo desnecessário que só deveria ser executado uma vez, somente usei dentro do escopo da função como exemplo.

As tags <options> devem corresponder exatamente a quantidade de voltas que o loop vai executar a partir do início.

Rever a arquitetura da lógica você poderá executar tudo mais facilmente sem a necessidade de múltiplos loops, bastando um único loop você captura os dados compõe e checa as opções reduzindo o consumo de memória para algo tão simples.

 

Em 22/12/2022 at 10:31, Frank K Hosaka disse:

onde eu aprendi que o <option> tem um propriedade chamada data-id

Qualquer tag pode conter um dataset seja ele data-id/ data-qualquer/ data-fulano

<div id="exemplo" data-pessoa="joaquin"></div>

<script>
    console.log(
        document.getElementById('exemplo').dataset.pessoa
    );
</script>

 

[Frank K Hosaka 0]

4 horas atrás, Omar~ disse:

 

 

Não precisa ficar replicando a mesma coisa.... No caso esses montes de innerHTML aí

Então vamos parar um loop quando ele deve parar em uma determinada situação.

Primeiro tenha certeza que a variável j é mesmo um numero inteiro.

Você pode chamar a função passando o valor como integer exemplo:

show(j);

 

Exemplo básico:

var j = '13';
show( parseInt(j) );
    
function show(contar) {
    var parar = (contar + 10); // o valor do parâmeto mais 10 para que o loop seja executado 10 vezes
    for (; contar < parar; contar++) { // enquanto a contagem for menor que o valor de parada
        console.log('Contagem executada: ' + contar);
    }
}

Algumas ponderações:

A variável de parada não é ideal ficar dento da função show se essa função for chamada dentro de um loop haverá uma sobrecarga de calculo desnecessário que só deveria ser executado uma vez, somente usei dentro do escopo da função como exemplo.

As tags <options> devem corresponder exatamente a quantidade de voltas que o loop vai executar a partir do início.

Rever a arquitetura da lógica você poderá executar tudo mais facilmente sem a necessidade de múltiplos loops, bastando um único loop você captura os dados compõe e checa as opções reduzindo o consumo de memória para algo tão simples.

 

Qualquer tag pode conter um dataset seja ele data-id/ data-qualquer/ data-fulano

<div id="exemplo" data-pessoa="joaquin"></div>

<script>
    console.log(
        document.getElementById('exemplo').dataset.pessoa
    );
</script>

 

 

A sua sugestão de trabalhar com a variável inteira deu certo!

 

Eu fiz assim: function show(k) { j = parseInt(k); etc

Valeu!

 

Aqui a listagem final:

<?php
$mysqli=new mysqli("localhost","root","","astudy");
$query=$mysqli->query("select * from tbprod order by prod");
$prod=$query->fetch_all(MYSQLI_ASSOC);?>
<script>
function procurar(valor){
    for(i=0;i<produtos.options.length;i++){
        if(produtos.options[i].value==valor){
            j=produtos.options[i].getAttribute('data-id');}}
    show(j);}
function show(k){
    j=parseInt(k);
    divshow.innerHTML="";
    for(i=j;i<j+9;i++){
    divshow.innerHTML+=produtos.options[i].value+"<br>"}}
</script>
<div><p><p>
<form>
<input list=produtos autofocus id=produto onchange=procurar(value) autofocus>
<datalist id=produtos>
<?php foreach($prod as $key=>$pr){echo "<option data-id=$key value='".$pr['prod']."'>";} ?>
</datalist></form></div>
<div id=divshow></div>
<script>show(0)</script>