Last active
May 14, 2020 18:38
-
-
Save veegishx/390fd6295ca2885118549fb312ae958d to your computer and use it in GitHub Desktop.
Progressively load data from arrays in javascript
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="UTF-8"> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
<title>Experiment</title> | |
</head> | |
<body> | |
<button id="loadFromStart" type="button">Load 1 More from start</button> | |
<button id="loadFromEnd" type="button">Load 1 More from end</button> | |
<button id="reset" type="button">Reset</button> | |
<h1>Examples of names:</h1> | |
<div id="names"></div> | |
<div id="content"></div> | |
<script> | |
let names = ['jason', 'peter', 'sam', 'alex', 'veegish', 'yashveer', 'imraan', 'bucks', 'cory', 'chady', 'nilesh', 'samsam', 'martin', 'nelson', 'samuel', 'diana', 'clover', 'jerry']; | |
let buttonStart = document.getElementById("loadFromStart"); | |
let buttonEnd = document.getElementById("loadFromEnd"); | |
let buttonReset = document.getElementById("reset"); | |
let original = document.getElementById("names"); | |
let content = document.getElementById("content"); | |
// Split array into chunks | |
const elements = splitArray(names, 6); | |
let count1 = -1; | |
let start1 = 0; | |
let end1 = 0; | |
original.innerHTML = JSON.stringify(elements); | |
buttonStart.addEventListener("click", function() { | |
if(count1 < elements.length - 1) { | |
const tempArray = [...elements]; | |
console.log(tempArray); | |
count1++; | |
start1 = count1; | |
//end1 = count1; | |
content.innerHTML += JSON.stringify(tempArray.splice(start1, 1)) + "</br>"; | |
} else { | |
buttonStart.disabled = true; | |
} | |
console.log("Start1: " + start1); | |
console.log("End1: " + end1); | |
console.log("Count1: " + count1); | |
}) | |
let count2 = elements.length; | |
let start2 = elements.length - 1; | |
let end2 = elements.length - 1; | |
original.innerHTML = JSON.stringify(elements); | |
buttonEnd.addEventListener("click", function() { | |
const tempArray = [...elements]; | |
console.log(tempArray); | |
if(count2 > 0) { | |
count2--; | |
//end2 = start2; | |
start2 = count2; | |
content.innerHTML += JSON.stringify(tempArray.splice(start2, 1)) + "</br>"; | |
} else { | |
buttonEnd.disabled = true; | |
} | |
console.log("Start2: " + start2); | |
console.log("End2: " + end2); | |
console.log("Count2: " + count2); | |
}) | |
buttonReset.addEventListener("click", function() { | |
content.innerHTML = ""; | |
count1 = 0; | |
start1 = 0; | |
end1 = 0; | |
count2 = elements.length - 1; | |
start2 = elements.length - 1; | |
end2 = elements.length - 1; | |
// location.reload(); | |
buttonEnd.disabled = false; | |
buttonStart.disabled = false; | |
}); | |
function splitArray(array, n) { | |
let rest = array.length % n; | |
let restUsed = rest; | |
let partLength = Math.floor(array.length / n); | |
let result = []; | |
for(let i = 0; i < array.length; i += partLength) { | |
let endOfArray = partLength + i; | |
let addMore = false; | |
if(rest != 0 && restUsed) { | |
endOfArray++; | |
restUsed--; | |
addMore = true; | |
} | |
result.push(array.slice(i, endOfArray)); | |
if(addMore) { | |
i++ | |
} | |
} | |
return result; | |
} | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment