Intentando crear una página usando Javascript. cuando trato de agregar HTML en el div principal, puedo ver el HTML pero veo indefinido en la primera línea del documento.
const letterArry = [ { name: 'A', id: 'a', soundtype: 'one' }, { name: 'B', id: 'b', soundtype: 'two' } ]; let eleOne = document.getElementById('app'); eleOne.innerHTML = letterArry.map((i) => { let html; return (html += `<div class={alphabets}> <ul> <li id= ${i.id}> ${i.name} ${i.soundtype} </li> </ul> </div`); })``` All I'm trying to do is create a list item, I don't have any console logs in the file or browser. can someone please help to understand why I'm seeing undefined in the top line? [code snippet](https://stackblitz.com/edit/js-jfz9dk?file=index.js)Tienes 2 problemas.
La función de mapa devuelve una matriz, por lo que en lugar de una cadena html, tiene una matriz al final.
Dado que crea una variable html dentro de la función de mapa, no concatena nada. Cada vez que tiene una nueva variable html sin valor.
Lo que desea se puede hacer mediante la función de mapa, pero la función de reducción se adapta mejor.
eleOne.innerHTML = letterArry.reduce( (previous, current) => previous + makeString(current), '' ); const makeString = (current) => { return `<div class={alphabets}><ul> <li id= ${current.id}>${current.name} ${current.soundtype}</li> </ul></div>` }Todo lo que necesita es una función que mapee sus datos para crear una matriz de elementos de lista (que luego join en una cadena HTML), y luego puede agregar el resultado de llamar a esa función a un elemento ul .
const arr=[{name:"A",id:"a",soundtype:"one"},{name:"B",id:"b",soundtype:"two"}]; const eleOne = document.getElementById('app'); function getItems(arr) { return arr.map(obj => { return ` <li id= ${obj.id}> ${obj.name} ${obj.soundtype} </li>`; }).join(''); } eleOne.insertAdjacentHTML('beforeend', `<ul>${getItems(arr)}</ul>`); <div id="app"></div>Documentación adicional
el valor de retorno directamente HTML al inicio no está definido así
const letterArry = [ { name: 'A', id: 'a', soundtype: 'one' }, { name: 'B', id: 'b', soundtype: 'two' }, ]; let eleOne = document.getElementById('app'); eleOne.innerHTML = letterArry.map((i) => { return (`<div class={alphabets}> <ul> <li id= ${i.id}> ${i.name} ${i.soundtype} </li> </ul> </div`); });