Question

The following is an example of a JSON file which includes a key Value pair with a URL under next_page_url”: “https://www.example.com/example.json”, which indicated the next JSON file in my XMLHttpRequest GET request. GET的请求可能包含数百页。

{
  "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"
        }
      ]
   ]
}

我有以下文字,即:html和科学学会,要求并显示初等人物的数据。

    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/bootstrap@4.6.2/dist/css/bootstrap.min.css">
  <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.4/dist/jquery.slim.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/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>

• “https://www.example.com/example.json”,。当<button category= btn btn-info onclick=loadNextPage() >Nextp</button>被点击? 它应当重复使用<代码>上的URL”的原始申请。

我已尝试增加另一项职能,使XMLHttpRequest成为另一个功能,但并不奏效。 function的职能是适当的方式?

谢谢!

Answer 1

您可更新<代码>loadBLM功能,以接受你希望提出的URL要求。然后,您的下页纽伦可以把<代码>载荷BLM()再次运行,但通过<代码>nextpage_url<>code>。我还建议在显示下一页的纽伦之前,检查<代码>nextpage_url 财产是否存在于应答物体上。

if (myObj.next_page_url)
  text += `<div class= pages ><button class= btn btn-info  onclick= loadBLM("${myObj.next_page_url}") >Next Page</button></div>`;

I also suggest that you fix your variable names. myArr isn t an array, it s an object, myArr.results is an array. In the snippet below I ve updated the variable names. In addition, for...in loops shouldn t be used to loop over arrays, instead, if you want to loop over an array s elements, use a regular for loop, a for..of loop, or a .forEach() loop. See the snippet below for full code:

function loadBLM(endpoint = "https://www.federalregister.gov/api/v1/documents.json?conditions%5Bagencies%5D%5B%5D=land-management-bureau&conditions%5Bpublication_date%5D%5Byear%5D=2023") {
  const xmlhttp = new XMLHttpRequest();
  xmlhttp.onload = function() {
    const myObj = JSON.parse(this.responseText);
    const myArr = myObj.results;
    let text = "<button type= button  class= btn btn-primary  data-toggle= collapse  data-target= #collapse >Info</button>";
    for (const result of myArr) {
      let agencies = result.agencies.map((a) => a.raw_name).join(" - ");
      text +=
        "<div class= fed-reg-container ><h2 class= title >" +
        result.title +
        "</h2><p>" +
        result.type +
        "</p><p>" +
        agencies +
        "</p><p>Document # " +
        result.document_number +
        "</p><p>Posted on: " +
        result.publication_date +
        "</p><p>" +
        result.abstract +
        "</p><a class= fed-reg-button  href= " +
        result.html_url +
        " >Read More</a></div>";
    }
    if (myObj.next_page_url)
      text += `<div class= pages ><button class= btn btn-info  onclick= loadBLM("${myObj.next_page_url}") >Next Page</button></div>`;
      
    document.getElementById("demo").innerHTML = text;
    document.getElementById("data-info").innerHTML = myObj.count + " " + myObj.description;
  };
  xmlhttp.open(
    "GET",
    endpoint,
    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/bootstrap@4.6.2/dist/css/bootstrap.min.css">
  <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.4/dist/jquery.slim.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/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>

我还要指出,这些日子使用<代码>XMLHttpRequest已经过时。浏览器(以及NodeJS等其它环境)为取用数据提供新的信息预报:fetch()。此外,在您的超文本中使用在线活动手写属性的最佳做法并不如onclick/code>,而是倾向于使用>。活动Listener(。我也建议重新制定你的法典,将你的超文本翻译成可再利用的职能,例如:

async function loadJSON(url) {
  const response = await fetch(url);
  if (!response.ok) // check if response worked (no 404 errors etc...)
    throw new Error(response.statusText);

  const data = response.json(); // get JSON from the response
  return data;
}

function createCard(data) {
  const agencies = data.agencies.map((a) => a.raw_name).join(" - ");
  return `<div class= fed-reg-container >
    <h2 class= title >${data.title}</h2>
    <p>${data.type}</p>
    <p>${agencies}</p>
    <p>Document # ${data.document_number}</p>
    <p>Posted on: ${data.publication_date}</p>
    <p>${data.abstract}</p>
    <a class= fed-reg-button  href= ${data.html_url} >Read More</a>
  </div>`;
}

function createInfoButton() {
  return `<button type= button  class= btn btn-primary  data-toggle= collapse  data-target= #collapse >Info</button>`;
}

function createControls(data) { // you could update this to include a prev page control
  if (data.next_page_url)
    return `<div class= pages >
      <button id= next-btn  class= btn btn-info >Next Page</button>
    </div>`;
  return "";
}

function render(response) {
  const myArr = response.results;
  let text = createInfoButton();
  for (const result of myArr) {
    text += createCard(result);
  }
  
  text += createControls(response);
  document.getElementById("demo").innerHTML = text;
  document.getElementById("data-info").innerHTML = response.count + " " + response.description;
}

function createBLMLoader(endpoint) {
  return async function loadBLM() {
    const response = await loadJSON(endpoint);
    endpoint = response.next_page_url;
    render(response);
  };
}



const API_URL = "https://www.federalregister.gov/api/v1/documents.json?conditions%5Bagencies%5D%5B%5D=land-management-bureau&conditions%5Bpublication_date%5D%5Byear%5D=2023";
const loadBLM = createBLMLoader(API_URL);
const blmBtn = document.getElementById("blm-btn");
const demoContainer = document.getElementById("demo");
blmBtn.addEventListener("click", loadBLM);
demoContainer.addEventListener("click", (e) => { // event-delegation
  if(e.target?.matches("#next-btn")) { // if the next-btn was clicked
    loadBLM();
  }
});

.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/bootstrap@4.6.2/dist/css/bootstrap.min.css">
  <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.4/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>
</head>

<button id="blm-btn" class="btn btn-info" type="button">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>

友情链接