Please, how do I limit items in a json API call to only two with JavaScript?-CodePudding

I have a website on Google Blogger where I use JavaScript to get IPSW firmware files via the IPSW.ME API. I have successfully come out with a design to match my template but what I will like is to get only the first two items from the JSON response. I'm still not very good with JS. Will be happy if someone can enlighten me. Here is the code I'm using

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()

CodePudding user response：

u can use array slice 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)

CodePudding user response：

First of all check if the API supports data limitation like LIMIT.

If this is not supported you can do

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

SOURCE