Estoy tratando de obtener datos de elementos div y generarlos separados con , de esta manera a, b ¿Cómo puedo lograr esto? Para mi ejemplo, el texto en la salida p debería verse como test, test222 dada
let desc = document.querySelectorAll(".desc"); let output = document.querySelectorAll(".output"); let items = []; desc.forEach((item, i) => { console.log(item.dataset.sentence); output.textContent += item[i]; }) <div class="desc" data-sentence="test"> </div> <div class="desc" data-sentence="test222 dada"> </div> <p class="output"> </p>Esto es lo que podrías probar:
La forma en que obtiene el texto con item.dataset.sentence está totalmente bien, solo necesita colocarlos en una matriz para usarlos más tarde.
let text = []; desc.forEach((item, i) => { text.push(item.dataset.sentence); })join() text.join(',') => 'test,test222 dada'
document.querySelectorAll(".output") no funcionará ya que devolverá una matriz, deberá cambiarlo a document.querySelector(".output") para tener un elemento.
const desc = document.querySelectorAll(".desc"); const output = document.querySelector(".output"); const text = []; desc.forEach(item => text.push(item.dataset.sentence)); output.textContent = text.join(','); <div class="desc" data-sentence="test"></div> <div class="desc" data-sentence="test222 dada"></div> <p class="output"></p>Aquí hay otra solución que demuestra el uso de funciones avanzadas de sintaxis de ECMAScript como doble desestructuración en la firma de la función, distribución de matrices ( [...iterable] ) junto con Array.prototype.map .
let desc = document.querySelectorAll(".desc"); let output = document.querySelector(".output"); output.textContent = [...desc].map(({dataset: { sentence } }) => sentence).join(', '); <div class="desc" data-sentence="test"></div> <div class="desc" data-sentence="test222 dada"></div> <p class="output"></p>Explicaciones:
[...desc] extiende la NodeList que tiene en desc en una matriz , lo que permite el uso de métodos de matriz como map y join .({dataset: { sentence } }) desestructura el objeto que se pasa al iterador del mapa. La firma básicamente dice "Espero que me pasen un objeto que tiene una propiedad de conjunto de dataset , que es un objeto que tiene una propiedad de sentence . Dame esa sentence como una variable local dentro del cuerpo de la función".Casi lo terminas pero cometes algún error.
Cuando selecciona la salida, solo necesita usar querySelector en lugar de querySelectorAll .
let desc = document.querySelectorAll(".desc"); let output = document.querySelector(".output"); const data = []; desc.forEach((item) => { data.push(item.dataset.sentence); }); output.textContent = data.join(","); <div class="desc" data-sentence="test"> </div> <div class="desc" data-sentence="test222 dada"> </div> <p class="output"> </p>