porque mi código actual genera coma, comillas entre los elementos de mi lista, no estoy seguro de cuál es el problema, por favor ayuda.
Cambié el código a esto para que sea más fácil de leer: "null" en el operador tinary funciona y cambiarlo no afecta el problema o el resultado. (currentCollection[indexOf item].Words son una matriz de palabras y expresiones regulares = /[az]/g)
for (let i = 0; i < currentCollection.length; i++) { let words = currentCollection[i].Words.join(" ") elementsString += `<div><h2>${currentCollection[i].name}</h2> <ul> ${currentCollection[i].Words.map(word => regex.test(word) ? (`<li>${word}</li>`) : null )}</ul></div>`Parece que estás tratando de hacer algo como esto. No estoy seguro de qué se supone que debe hacer esa test , así que la omití. Pero agregué algo de CSS para que se vea bonito.
const arr = [ { id: 1, name: 'Alpaca', words:['a', 'b'] }, { id: 2, name: 'Moose', words:['c', 'd'] }, { id: 3, name: 'Tiger', words:['e', 'f'] }, { id: 4, name: 'Sparrow', words:['g', 'h'] } ]; // `map` over the array of words to create a // list of items function getItems(words) { return words.map(word => { return `<li>${word}</li>`; }).join(''); } // `map` over the array to create a heading // and a list of items in an unordered list element const html = arr.map(obj => { const { name, words } = obj; return ` <div> <h2>${name}<h2> <ul>${getItems(words)}</ul> </div> `; }).join(''); document.body.innerHTML = html; h2 { font-size: 1em; } ul { font-weight: 400; list-style: none; margin-left: 0; padding-left: 0; } li { padding: 0.2em; margin-left: 0.5em; text-transform: uppercase; } li:hover { cursor: pointer; background-color: #ffff00; }Documentación adicional