Obtenir une ligne à partir d'un tableau imbriqué, pousser les valeurs dans l'entrée puis setTimeout pour passer au tableau suivant?

Question

Je suis un débutant et ça va montrer :(mais quelqu'un pourrait-il m'aider dans la bonne direction? J'ai un objet littéral avec des tableaux imbriqués à l'intérieur.J'ai besoin de saisir la première rangée de tableaux puis pousser les valeurs de cette rangée . dans les trois différentes entrées puis au bout de 5 secondes, il délai d'attente, puis afficher la ligne suivante du tableau jsFiddle pour référence https://jsfiddle.net/sqj3jz4p/

<div> 
    <label for="votes1">Votes for Candidate 1</label> <input 
    type="number" class="count" id="votes1" readonly> 
</div> 
<div> 
<label for="votes2">Votes for Candidate 2</label> <input type="number" 
class="count" id="votes2" readonly> 
</div> 
<div> 
    <label for="votes3">Votes for Candidate 3</label> <input type="number" 
    class="count" id="votes3" readonly> 
</div> 

var votingData = { 
    voting: [ 
    [ 
    336122, 612446, 711326 
    ], 
    [ 
    4663122, 7001244, 822506 
    ], 
    [ 
    10437916, 12443910, 930971 
    ], 
    [ 
    17623004, 18680779, 1060304 
    ], 
    [ 
    24179347, 21991292, 1175930 
    ] 
] 
}; 


function updateVoteCount(array) { 
"use strict"; 
    for (var i = 0, l = votingData.voting.length; i < l; i++) { 
    var voteArray = votingData.voting[i]; 
    console.log(voteArray); 

    document.getElementById("votes1").value = voteArray[0]; 
    document.getElementById("votes2").value = voteArray[1]; 
    document.getElementById("votes3").value = voteArray[2]; 

    } 
} 


var timeDelayMs = 5000; // 5-second delay 
    function voteUpdates(voting,myIndex) { 
    "use strict"; 

    if (voting.length > myIndex) { 
     updateVoteCount(voting[myIndex]); 
     setTimeout(voteUpdates, timeDelayMs, voting, myIndex+1); 
    } 
    } 

    voteUpdates(voting[0]); 

Answer 1

Il y avait quelques questions sur votre code, comme l'utilisation de setTimeOut et les paramètres de voteUpdates fonction. Jetez un oeil à une version de votre code avec des corrections:

var votingData = { 
 
    voting: [ 
 
    [336122, 612446, 711326], 
 
    [4663122, 7001244, 822506], 
 
    [10437916, 12443910, 930971], 
 
    [17623004, 18680779, 1060304], 
 
    [24179347, 21991292, 1175930]] 
 
}; 
 
    
 
function updateVoteCount(voteArray) { 
 
    document.getElementById("votes1").value = voteArray[0]; 
 
    document.getElementById("votes2").value = voteArray[1]; 
 
    document.getElementById("votes3").value = voteArray[2]; 
 
} 
 
    
 
var timeDelayMs = 5000; // 5-second delay 
 

 
function voteUpdates(voting, myIndex) { 
 
    if (myIndex < voting.length) { 
 
    updateVoteCount(voting[myIndex]); 
 
    setTimeout(function() { voteUpdates(voting, myIndex+1) }, timeDelayMs); 
 
    } 
 
} 
 

 
voteUpdates(votingData.voting, 0);

<div> 
 
    <label for="votes1">Votes for Candidate 1</label> <input 
 
    type="number" class="count" id="votes1" readonly> 
 
</div> 
 
<div> 
 
<label for="votes2">Votes for Candidate 2</label> <input type="number" 
 
class="count" id="votes2" readonly> 
 
</div> 
 
<div> 
 
    <label for="votes3">Votes for Candidate 3</label> <input type="number" 
 
    class="count" id="votes3" readonly> 
 
</div>

Answer 2

vous pouvez obtenir le comportement que vous êtes à la recherche en appelant updateVoteCount récursive.

var timeDelayMs = 5000; // 5-second delay 
var nrows = votingData.voting.length; 

function updateVoteCount(i) { 

    var voteArray = votingData.voting[i]; 

    document.getElementById("votes1").value = voteArray[0]; 
    document.getElementById("votes2").value = voteArray[1]; 
    document.getElementById("votes3").value = voteArray[2]; 

    if (i < nrows - 1) { 
    setTimeout(function() { updateVoteCount(i+1); }, timeDelayMs); 
    } 

} 

updateVoteCount(0); 

Chaque exécution de la fonction se déclenchera r le suivant après un délai spécifié jusqu'à ce qu'il n'y ait plus de lignes de données à lire.

Updated JSFiddle.

Answer 3

Voici une solution simple:

var votingData = { 
 
    voting: [ 
 
    [ 
 
     336122, 612446, 711326 
 
    ], 
 
    [ 
 
     4663122, 7001244, 822506 
 
    ], 
 
    [ 
 
     10437916, 12443910, 930971 
 
    ], 
 
    [ 
 
     17623004, 18680779, 1060304 
 
    ], 
 
    [ 
 
     24179347, 21991292, 1175930 
 
    ] 
 
    ] 
 
}; 
 

 

 
function updateVoteCount(position) { 
 
\t "use strict"; 
 

 
    document.getElementById("votes1").value = votingData.voting[position][0]; 
 
\t document.getElementById("votes2").value = votingData.voting[position][1]; 
 
\t document.getElementById("votes3").value = votingData.voting[position][2]; 
 
    
 
    if (position < votingData.voting.length) { 
 
    \t setTimeout(function() { 
 
    \t updateVoteCount(position+1) 
 
    }, 5000) 
 
    } 
 
} 
 

 
updateVoteCount(0)

<div> 
 
<label for="votes1">Votes for Candidate 1</label> <input type="number" class="count" id="votes1" readonly> 
 
</div> 
 
<div> 
 
<label for="votes2">Votes for Candidate 2</label> <input type="number" class="count" id="votes2" readonly> 
 
</div> 
 
<div> 
 
<label for="votes3">Votes for Candidate 3</label> <input type="number" class="count" id="votes3" readonly> 
 
</div> 
 
<script src="test.js"></script>

Answer 4

Fondamentalement, vous devez accéder au tableau dans updateVoteCount, sans aucune boucle for.

Ensuite, il vous suffit de remettre le tableau et l'index de départ.

voteUpdates(votingData.voting, 0); 
//   ^^^^^^^^^^^^^^^^^ array 
//       ^index 

function updateVoteCount(array) { 
 
    document.getElementById("votes1").value = array[0]; 
 
    document.getElementById("votes2").value = array[1]; 
 
    document.getElementById("votes3").value = array[2]; 
 
} 
 

 
function voteUpdates(voting, myIndex) { 
 
    updateVoteCount(voting[myIndex]); // you could move it outside of the condition 
 
    if (myIndex + 1 < voting.length) { // check next index 
 
     setTimeout(voteUpdates, timeDelayMs, voting, myIndex + 1); 
 
    } 
 
} 
 

 
var votingData = { voting: [[336122, 612446, 711326], [4663122, 7001244, 822506], [10437916, 12443910, 930971], [17623004, 18680779, 1060304], [24179347, 21991292, 1175930]] }, 
 
    timeDelayMs = 5000; // 5-second delay 
 

 
voteUpdates(votingData.voting, 0);

<div><label for="votes1">Votes for Candidate 1</label><input type="number" class="count" id="votes1" readonly></div> 
 
<div><label for="votes2">Votes for Candidate 2</label><input type="number" class="count" id="votes2" readonly></div> 
 
<div><label for="votes3">Votes for Candidate 3</label><input type="number" class="count" id="votes3" readonly></div>