I am displaying data from a JSON file to a website using HTML. I want it to display the first 10 actors in the list and the movie they are in. Then I want the user to be able to press a button and be able to display the next 10, and another button to go back 10. I have been able to display the first 10 onload, I have an index on line 17 that counts how many rows I have added to “newContent” and once it reaches 10 it breaks the loop on line 36. But when I press the button on the page the index no longer works. It just goes past 10 without breaking till the loop goes through the entire JSON file.
var actors = [];
const xhr = new XMLHttpRequest(); //Gets the http request
xhr.onload = function () {
if (xhr.status == 200) {
var responseObject = JSON.parse(xhr.responseText);
var newContent = '';
var parameter = 0;
var counter = 0;
function table(parameter) {
var index = 0;
for (var i = parameter; i < responseObject.movies.length; i++) {
for(var j=0; j < responseObject.movies[i].cast.length; j++){
//Checking for duplicates
if((actors.indexOf(responseObject.movies[i].cast[j]) == -1)) {
var letter = responseObject.movies[i].cast[j].charAt(0);
if((/[a-zA-Z]/).test(letter)) {
newContent += '<tr class="event">';
newContent += '<td>' + responseObject.movies[i].cast[j] + '</td>';
newContent += '<td>' + responseObject.movies[i].title + '</td>';
newContent += '<td>' + index + '</td>';
newContent += '</tr>';
index++;
}
}
}
counter++;
if (index == 10) {
break;
}
}
return newContent;
}
document.getElementById('castNames').innerHTML = table(0);
var showMoreBtn = document.getElementById('showMoreBtn');
showMoreBtn.addEventListener('click', showMore, false);
function showMore() {
parameter = counter;
return document.getElementById('castNames').innerHTML = table(parameter);
}
}
}
xhr.open('GET', "static/data/movies.json", true);
xhr.send();table {
width: 100%;
}
tr {
border-bottom: 1px solid black;
}
th {
color: black;
}
td {
padding-top: 5px;
color: black;
}<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" href="static/css/style.css">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container">
<img src = "static/images/movieLogo.png" alt = "reel of film" width = "50px" height = auto style = "margin-right: 25px;">
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li><a href="{{ url_for('index') }}" class="nav-link px-2 link-secondary">Home</a></li>
<li><a href="{{ url_for('movies') }}" class="nav-link px-2 link-dark">Movies</a></li>
<li><a href="{{ url_for('actors') }}" class="nav-link px-2 link-dark">Actors</a></li>
</ul>
</div>
</div>
</nav>
<div id = "buttonClass">
<button id="showMoreBtn" class = "button" type="button">More</button>
<!--<button id="viewLessBtn" class = "button" type="button">More</button>-->
</div>
<table>
<thead>
<tr>
<th class = "tableHeader">Name</td>
<th class = "tableHeader">Movie</td>
</tr>
</thead>
<tbody id="castNames">
</tbody>
</table>
<!--<p id="castNames"></p>-->
<script src="{{ url_for('static', filename='actorDisplay.js') }}"></script>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
-->
</body>
</html>TLDR index in my JavaScript in the function table() is working when I load the page but not when I call the function with the button to see the next 10.
