Necesito obtener solo los primeros 6 elementos de mi Array. Lo he intentado con ese .slice(0, 6) pero no funciona. Tal vez alguien tenga una idea. Mi matriz tiene alrededor de 15 nodos, por lo que solo necesito los primeros 6 para mostrar en mi tabla.
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); }); }); });Necesito obtener solo los primeros 6 elementos de mi Array.
querySelectorAll no devuelve una matriz, devuelve unaNodeList .
Lo he intentado con ese .slice(0, 6) pero no funciona.
Eso es porque las instancias de NodeList no tienen ese método.
Puedes aplicarles el Array one:
const firstSix = Array.prototype.slice.call(document.querySelectorAll("selector"), 0, 6); Alternativamente, puede distribuir los elementos en una matriz y luego usar la slice en ella:
const firstSix = [...document.querySelectorAll("selector")].slice(0, 6); o cree la matriz a través de Array.from en lugar de distribuir:
const firstSix = Array.from(document.querySelectorAll("selector")).slice(0, 6);La primera solución es simplemente no renderizar los elementos para comenzar si no necesita que se rendericen los otros elementos.
books.slice(0,5).forEach(... your code ...)Si desea que se representen los elementos y aún desea seleccionar las filas, puede usar un Selector CSS nth-child para seleccionar 6 filas de la tabla
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> Ahora, la razón por la que su código no funcionó es porque querySelectorAll devuelve una colección html, por lo que debe convertirla en una matriz.
const rows1 = [...document.querySelectorAll("tr")].slice(0,6); // or const rows2 = Array.from(document.querySelectorAll("tr")).slice(0,6)