請問，如何使用JavaScript將jsonAPI呼叫中的專案限制為兩個？-有解無憂

我在 Google Blogger 上有一個網站，我使用 JavaScript 通過 IPSW.ME API 獲取 IPSW 韌體檔案。我已經成功地設計出了與我的模板相匹配的設計，但我希望只從 JSON 回應中獲取前兩項。我還是不太擅長 JS。如果有人能啟發我，我會很高興。這是我正在使用的代碼

function fetchData() {
fetch('https://api.ipsw.me/v4/device/iPad8,8')
  .then((response) => {
    return response.json();
  })
  .then(data => {
    console.log(data);
    const html = data.firmwares.map(info => {
        return `
        <div >
        <table id='ipsw-td'>
        <tr>
          <td><span  >Device:</span></td> 
          <td>iPad Pro 3 (12.9-inch, Cellular, 1TB Model) (${info.identifier})</td>
          </tr>
          <tr>
          <td><span  >Firmware Version:</span></td> 
          <td>iOS ${info.version} ( Build  ${info.buildid})</td>
          </tr>
          <tr>
          <td><span  >Released Date:</span></td>
          <td> ${info.releasedate}</td>
          </tr>
          <tr>
          <td><span  >File MD5sum:</span> </td>
          <td><code>${info.md5sum}</code></td>
          </tr>
          <tr>
          <td><span  >File SHA1sum:</span> </td>
          <td><code>${info.sha1sum}</code></td>
          </tr>
          <tr>
          <td><span  >Signed IPSW:</span></td>
          <td> ${info.signed}</td>
          </tr>
        </table>
        <center>
        <div class='dlBox'>
  <!--[ Change data-text='...' atribute to add new file type ]-->
  <span class='fT' data-text='IPSW'></span>
  <div class='fN'>
    <!--[ File name ]-->
    <span> Download for ${info.identifier}</span>
    <span class='fS'>Size: ${info.filesize} bytes</span>
  </div>
  
  <!--[ Download link (change href='...' atribute to add link download) ]-->
  <a class='button' aria-label='Download' href='${info.url}' rel='noreferrer' target='_blank'><i class='icon dl'></i></a>
</div>
</center>
<h4 style='color:blue; text-align:center'> Can't Download? Copy link from below, paste in a new tab to download</h4>
<div class='btnF'>
<input type="text" value="${info.url}" id="myInput" style='width:70%'>
<button class='button ln' onclick="myFunction()" onm ouseout="outFunc()"><span><svg class='line' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><g><rect x='5.54615' y='5.54615' width='16.45385' height='16.45385' rx='4'></rect><path d='M171.33311,181.3216v-8.45385a4,4,0,0,1,4-4H183.787' transform='translate(-169.33311 -166.86775)'></path></g></svg></span>&nbsp;
  </button>
  </div>
<ins 
     style="display:block; text-align:center;"
     data-ad-layout="in-article"
     data-ad-format="fluid"
     data-ad-client="ca-pub-0000000000"
     data-ad-slot="2566286925"></ins>
        `;  
     })
    .join();
    console.log(html);
    document.querySelector('#ipsw-info').insertAdjacentHTML('afterbegin', html);
  });
}
fetchData()

uj5u.com熱心網友回復：

你可以使用陣列切片 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/slice

function fetchData(limit) {
fetch('https://api.ipsw.me/v4/device/iPad8,8')
  .then((response) => {
    return response.json();
  })
  .then(data => {
    const html = data.firmwares.slice(0, limit).map(info => {
        return `
        <div >
        <table id='ipsw-td'>
        <tr>
          <td><span  >Device:</span></td> 
          <td>iPad Pro 3 (12.9-inch, Cellular, 1TB Model) (${info.identifier})</td>
          </tr>
          <tr>
          <td><span  >Firmware Version:</span></td> 
          <td>iOS ${info.version} ( Build  ${info.buildid})</td>
          </tr>
          <tr>
          <td><span  >Released Date:</span></td>
          <td> ${info.releasedate}</td>
          </tr>
          <tr>
          <td><span  >File MD5sum:</span> </td>
          <td><code>${info.md5sum}</code></td>
          </tr>
          <tr>
          <td><span  >File SHA1sum:</span> </td>
          <td><code>${info.sha1sum}</code></td>
          </tr>
          <tr>
          <td><span  >Signed IPSW:</span></td>
          <td> ${info.signed}</td>
          </tr>
        </table>
        <center>
        <div class='dlBox'>
  <!--[ Change data-text='...' atribute to add new file type ]-->
  <span class='fT' data-text='IPSW'></span>
  <div class='fN'>
    <!--[ File name ]-->
    <span> Download for ${info.identifier}</span>
    <span class='fS'>Size: ${info.filesize} bytes</span>
  </div>
  
  <!--[ Download link (change href='...' atribute to add link download) ]-->
  <a class='button' aria-label='Download' href='${info.url}' rel='noreferrer' target='_blank'><i class='icon dl'></i></a>
</div>
</center>
<h4 style='color:blue; text-align:center'> Can't Download? Copy link from below, paste in a new tab to download</h4>
<div class='btnF'>
<input type="text" value="${info.url}" id="myInput" style='width:70%'>
<button class='button ln' onclick="myFunction()" onm ouseout="outFunc()"><span><svg class='line' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><g><rect x='5.54615' y='5.54615' width='16.45385' height='16.45385' rx='4'></rect><path d='M171.33311,181.3216v-8.45385a4,4,0,0,1,4-4H183.787' transform='translate(-169.33311 -166.86775)'></path></g></svg></span>&nbsp;
  </button>
  </div>
<ins 
     style="display:block; text-align:center;"
     data-ad-layout="in-article"
     data-ad-format="fluid"
     data-ad-client="ca-pub-7092179791790867"
     data-ad-slot="2566286925"></ins>
        `;  
     })
    .join();
    console.log(html);
    document.querySelector('#ipsw-info').insertAdjacentHTML('afterbegin', html);
  });
}
fetchData(2)

uj5u.com熱心網友回復：

首先檢查是否API支持資料限制，如LIMIT.

如果不支持，您可以這樣做

const html = data.firmwares.slice(0,2).map(info => { ...

資源

轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/504661.html

標籤：javascript api

上一篇：如果陣列物件的名稱相同，則在ts中合并陣列物件

下一篇：如何在一個之后添加一個HTML元素并在另一個之前完成