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.slice(0,5).forEach(bookXmlNode => {
let row = document.createElement('tr');
//Saison
let td = document.createElement('td');
td.innerText = bookXmlNode.children[0].innerHTML;
row.appendChild(td);
// von-bis
td = document.createElement('td');
td.innerText = bookXmlNode.children[1].innerHTML +" - " + bookXmlNode.children[2].innerHTML;
row.appendChild(td);
//preis
td = document.createElement('td');
td.innerText = bookXmlNode.children[3].children[2].innerHTML +" €";
row.appendChild(td);
tableBooks.children[0].appendChild(row);
});
});
});
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);
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)