0

tengo este pequeño problema hace mucho y no le daba mayor importancia porque no era tan invasivo pero cuando hago un "renderizado dinamico" de un elemento con un bucle en jquery aparecen "," en mi html.

Por ejemplo meto dentro de un string literal codigo html para crear una tabla de forma dinamica y dentro de ese string hago un map de un arr para las filas y aparecen en el documento varias ",".

introducir la descripción de la imagen aquí

como asi tambien en un navbar que se genera con jqueryintroducir la descripción de la imagen aquí

dejo el codigo de la primer tabla para ver si podemos encontrar una solución y saber porque sucede esto.

    const add_table = (arr)=>{

   let table = `
        <h6>${arr[0].farm}</h6>
        <table id="${arr[0].farm}" class="table table-condensed table-striped-columns  nowrap dt-responsive shadow-lg mt-3">
            <thead>
                <tr>
                    <th>Lote</th>
                    <th>Ha</th>
                    <th>Cultivo</th>
                </tr>
            </thead>

            <tbody>
                ${
                    arr.map(e=>{
                        return `<tr> 
                            <td class="text-center">${e.lote}</td>
                            <td class="text-center">${e.ha}</td>
                            <td class="text-center">${e.crop}</td>
                        </tr>`
                    })
                }
            </tbody>
        </table>
    `

    $('#tables').append(table)

}

Y tambien dejo el html desde la consola introducir la descripción de la imagen aquí

PD: Intente en el pasado hacer sobre la variable con el string literal un replace(',','') pero nunca funciono

EDICIÓN: Agrego un console.log de lo que devuelve el codigo del map de la table.

console.log(arr.map((e)=>{
    return`<tr> 
        <td class="text-center">${e.lote}</td>
        <td class="text-center">${e.ha}</td>
        <td class="text-center">${e.crop}</td>
    </tr>`
}) )

y el resultado en consola es:

['<tr> \n            <td class="text-center">Lote 6</…  <td class="text-center">Soja</td>\n        </tr>', '<tr> \n            <td class="text-center">Lote 5</…<td class="text-center">Varios</td>\n        </tr>', '<tr> \n            <td class="text-center">Lote 3</…<td class="text-center">Varios</td>\n        </tr>', '<tr> \n            <td class="text-center">Lote 2</…  <td class="text-center">Maiz</td>\n        </tr>', '<tr> \n            <td class="text-center">Lote 1</…  <td class="text-center">Soja</td>\n        </tr>']

introducir la descripción de la imagen aquí

5
  • Acabo de hacer una prueba y descubri un comportamiento, cuando en el map itera una sola vez. Las "," no aparecen. Debe ser algun comportamiento del map Commented el 24 ene. 2023 a las 6:14
  • En el navbar parecen más apostrofes que comas, pero no puede ser un comportamiento del map en ningún caso. Tiene pinta de ser texto que te queda fuera de la celda de la tabla y se dibuja antes de esta, algo está fuera del '<td></td>' En la primera tabla tienes cinco filas y cuatro comas , parece que se añade una coma en cada iteración. ¿Podrías meter el resultado de arr.map en una variable y mostrar su valor fuera de la tabla?
    – Fly
    Commented el 24 ene. 2023 a las 11:15
  • Hola, en el navbar son comas, las copio y pego y son comas. Dentro de un console.log puse exactamente el mismo codigo del map y claro, me devuelve un array que coincide con el numero de comas. Esa seria un poco la causa, pero cual puede ser la solución? Voy a editar mi pregunta con el contenido de ese array. Commented el 24 ene. 2023 a las 13:40
  • voy a hacer la prueba, pero me es mas comodo con los `` porque tengo mucho codigo js en medio del html en todo el codigo Commented el 24 ene. 2023 a las 14:04
  • @Cris223511.dev intente con un elemento mas chico que tiene el problema y sigue con las "," Commented el 24 ene. 2023 a las 16:21

1 respuesta 1

2

Tu problema es que .map() devuelve un array y ${array} te está sacando el texto separando cada elemento con comas y estas quedan fuera de la celda y por tanto fuera de la tabla.

Acabo de probar y ${arr} devuelve lo mismo que arr.toString(), es decir, los elementos separados por comas:

 <tr>...</tr>,<tr>...</tr>,<tr>...</tr>,<tr>...</tr>

Tendrás que iterar por el array y devolver cada elemento como un string.

arr.map(e=>{        
    return `<tr> 
        <td class="text-center">${e.lote}</td>
        <td class="text-center">${e.ha}</td>
        <td class="text-center">${e.crop}</td>
    </tr>`
}).forEach( function(value, key){document.write(value.toString()) }) 

En este snippet puedes comprobarlo:

arr = ['a','b','c']
console.log(arr.toString())

 ['a','b','c'].forEach(function(value, key){ document.write(value.toString())}) 

Esto debería funcionar en este caso, aunque yo armaría el html de una manera más tradicional, con un bucle y recorrer todo el array.

El document.write() lo usé para comprobar si funcionaba, no lo recomiendo como solución final.

Por cierto, en el navbar, como comentaba, debes tener una estructura similar, recuerda revisarla también.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.