The following is an example of a JSON file that contains a key value pair with a URL under "next_page_url": "https://www.example.com/example.json", which indicates the next JSON file in my XMLHttpRequest GET request. The GET request could contain hundreds of pages.
{
"count": 135,
"description": "Documents published from 01/01/2020 to 01/01/2050 and from Surface Mining Reclamation and Enforcement Office",
"total_pages": 7,
"next_page_url": "https://www.example.com/example.json",
"results": [
{
"title": "Agency Information Collection Activities; Revisions; Renewal; and Transfer, Assignment, or Sale of Permit Rights",
"type": "Notice",
"abstract": "In accordance with the Paperwork Reduction Act of 1995, we, the Office of Surface Mining Reclamation and Enforcement (OSMRE), are proposing to renew an information collection.",
"document_number": "2023-09869",
"html_url": "https://www.federalregister.gov/documents/2023/05/09/2023-09869/agency-information-collection-activities-revisions-renewal-and-transfer-assignment-or-sale-of-permit",
"pdf_url": "https://www.govinfo.gov/content/pkg/FR-2023-05-09/pdf/2023-09869.pdf",
"public_inspection_pdf_url": "https://public-inspection.federalregister.gov/2023-09869.pdf?1683549934",
"publication_date": "2023-05-09",
"agencies": [
{
"raw_name": "DEPARTMENT OF THE INTERIOR",
"name": "Interior Department",
"id": 253,
"url": "https://www.federalregister.gov/agencies/interior-department",
"json_url": "https://www.federalregister.gov/api/v1/agencies/253",
"parent_id": null,
"slug": "interior-department"
},
{
"raw_name": "Office of Surface Mining Reclamation and Enforcement",
"name": "Surface Mining Reclamation and Enforcement Office",
"id": 480,
"url": "https://www.federalregister.gov/agencies/surface-mining-reclamation-and-enforcement-office",
"json_url": "https://www.federalregister.gov/api/v1/agencies/480",
"parent_id": 253,
"slug": "surface-mining-reclamation-and-enforcement-office"
}
]
]
}
I have the following script, html, and CSS to request and display the JSON data as desired.
function loadBLM() {
const xmlhttp = new XMLHttpRequest();
xmlhttp.onload = function () {
const myArr = JSON.parse(this.responseText);
let text = "<button type='button' class='btn btn-primary' data-toggle='collapse' data-target='#collapse'>Info</button>";
for (let i in myArr.results) {
let agencies = myArr.results[i].agencies.map((a) => a.raw_name).join(" - ");
text +=
"<div class='fed-reg-container'><h2 class='title'>" +
myArr.results[i].title +
"</h2><p>" +
myArr.results[i].type +
"</p><p>" +
agencies +
"</p><p>Document # " +
myArr.results[i].document_number +
"</p><p>Posted on: " +
myArr.results[i].publication_date +
"</p><p>" +
myArr.results[i].abstract +
"</p><a class='fed-reg-button' href='" +
myArr.results[i].html_url +
"'>Read More</a></div>";
}
text += "<div class='pages'><button class='btn btn-info' onclick='loadNextPage()'>Next Page</button></div>";
document.getElementById("demo").innerHTML = text;
document.getElementById("data-info").innerHTML = myArr.count + " " + myArr.description;
};
xmlhttp.open(
"GET",
"https://www.federalregister.gov/api/v1/documents.json?conditions%5Bagencies%5D%5B%5D=land-management-bureau&conditions%5Bpublication_date%5D%5Byear%5D=2023",
true
);
xmlhttp.send();
}.fed-reg-container {
background-color: black;
color: white;
padding: 20px;
margin: 20px 0;
}
.title {
color: #fcb900;
}
.fed-reg-button {
background-color: #fcb900;
color: black;
padding: 10px;
display: block;
max-width: 100px;
text-align: center;
font-weight: 600;
text-decoration: none;
}<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<button class="btn btn-info" type="button" onclick="loadBLM()">Bureau of Land Management</button>
<br><br>
<div class="container">
<div id="collapse" class="collapse">
<h2>About this resource</h2>
<p id='data-info'></p>
</div>
</div>
<div id="demo"></div>How can I send another XMLHttpRequest using the URL returned in the "next_page_url": "https://www.example.com/example.json", when the <button class='btn btn-info' onclick='loadNextPage()'>Next Page</button> is clicked? It should repeat the original request using the URL in "nextpage_url".
I have tried adding another function to make another XMLHttpRequest and it does not work. Would a nested function be the proper way?
Thank you!