After getting one row from the nested array, put the values in the input and then setTimeout to move on to the next array?
I'm a newbie and it will show :( but can anyone help me in the right direction? I have an object literal with arrays nested inside. I need to grab the first row of the arrays and then push the values of that row into three different inputs, while then after 5 seconds it will timeout and then the next line of the array is displayed.JSfiddle for reference 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]);
+3
source to share
4 answers
There were several problems in your code like usage setTimeOut
and parameters for the function voteUpdates
. Take a look at the patched version of your code:
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>
+1
source to share
You can achieve what you are looking for by calling updateVoteCount
recursively:
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);
Each execution of the function starts the next one after the specified delay, until there are more rows of data to read.
+1
source to share
Here's a simple solution:
var votingData = {
voting: [
[
336122, 612446, 711326
],
[
4663122, 7001244, 822506
],
[
10437916, 12443910, 930971
],
[
17623004, 18680779, 1060304
],
[
24179347, 21991292, 1175930
]
]
};
function updateVoteCount(position) {
"use strict";
document.getElementById("votes1").value = votingData.voting[position][0];
document.getElementById("votes2").value = votingData.voting[position][1];
document.getElementById("votes3").value = votingData.voting[position][2];
if (position < votingData.voting.length) {
setTimeout(function() {
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>
+1
source to share
Basically you need to access the array in updateVoteCount
, without a loop for
.
Then you just need to pass the array and starting index.
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>
+1
source to share