Get only the first 6 elements from querySelectorAll-CodePudding

I need to get only the first 6 elements from my Array. I have try it with that .slice(0, 6) but it´s wont work. Maybe someone have a idea. My Array have arround 15 Nodes , so i need only the first 6 to display in my table.

let xmlContent = '';
let tableBooks = document.getElementById('books');
fetch('info2.xml').then((response) => {
  response.text().then((xml) => {
    xmlContent = xml;

    let parser = new DOMParser();
    let xmlDOM = parser.parseFromString(xmlContent, 'application/xml');

    let container = xmlDOM.querySelector("[ID='91961']");
    let books = container.querySelectorAll("SAISON");


    books.forEach(bookXmlNode => {

      let row = document.createElement('tr');

      //author
      let td = document.createElement('td');
      td.innerText = bookXmlNode.children[0].innerHTML;
      row.appendChild(td);

      //  title
      td = document.createElement('td');
      td.innerText = bookXmlNode.children[1].innerHTML   " - "   bookXmlNode.children[2].innerHTML;
      row.appendChild(td);


      //description
      td = document.createElement('td');
      td.innerText = bookXmlNode.children[3].children[2].innerHTML   " €";
      row.appendChild(td);


      tableBooks.children[0].appendChild(row);

    });

  });
});

CodePudding user response：

I need to get only the first 6 elements from my Array.

querySelectorAll doesn't return an array, it returns a NodeList.

I have try it with that .slice(0, 6) but it´s wont work.

That's because NodeList instances don't have that method.

You can apply the Array one to them:

const firstSix = Array.prototype.slice.call(document.querySelectorAll("selector"), 0, 6);

Alternatively, you can spread out the elements into an array and then use slice on it:

const firstSix = [...document.querySelectorAll("selector")].slice(0, 6);

or create the array via Array.from rather than spread:

const firstSix = Array.from(document.querySelectorAll("selector")).slice(0, 6);

CodePudding user response：

First solution is to just not render the elements to start if you do not need the other elements to be rendered.

books.slice(0,5).forEach(... your code ...)

If you want the eleements to be rendered, and you want to select the rows still, you can just use a CSS Selector nth-child to select 6 table rows

console.log(document.querySelectorAll("#books > tbody > tr:nth-child(-n 6)"))

<table id="books">
  <tbody>
    <tr><td>1</td></tr>
    <tr><td>2</td></tr>
    <tr><td>3</td></tr>
    <tr><td>4</td></tr>
    <tr><td>5</td></tr>
    <tr><td>6</td></tr>
    <tr><td>7</td></tr>
    <tr><td>8</td></tr>
    <tr><td>9</td></tr>
    <tr><td>10</td></tr>
  </tbody>
</table>

Now the reason your code did not work is because a querySelectorAll returns an html collection, so you need to convert the it over to array.

const rows1 = [...document.querySelectorAll("tr")].slice(0,6);
// or
const rows2 =  Array.from(document.querySelectorAll("tr")).slice(0,6)