JavaScript ¿Cómo dibujar el contenido de un Array en el DOM?

Avatar

Hola, gracias por leer esto.

Tengo un Array el cual quiero dibujar su contenido en el DOM, he encontrado una manera, pero no sé si es la más eficiente.

Lo que hago es lo siguiente. Dentro del Array creo (no estoy seguro de si estoy en lo correcto) los objetos q y a dentro de los cuales pongo un string que es el texto que quiero poner en el DOM. Igual me estoy equivocando con los conceptos jejejje.

 q: "Prueba 1",
 a:"Autor 1"
 },
 {
 q: "Prueba 2",
 a:"Autor 2"
 },
 {
 q: "Prueba 3",
 a:"Autor 3"
 },
 {
 q: "Prueba 3",
 a:"Autor 3"
 },
 {
 q: "Prueba 4",
 a:"Autor 4"
 },
 {
 q: "Prueba 5",
 a:"Autor 5"
 },
]

Después de crear el Array con los objetos q y a, creo una función que me permite seleccionar uno de los objetos y meterlo en el DOM, por ahora lo dibujo con document.write pero es solo para pruebas.

Mi duda era saber si habrá otra camino para hacer lo que estoy haciendo y si este es el camino más eficiente, ya que dentro del Array lo tengo son varios objetos y quería más bien crear sólo strings haciendo lo siguiente.

 "prueba-1",
 "prueba-2",
 "prueba-3",
 "prueba-4",
 "prueba-5" ]

Pero esta estructura de Array no consigo dibujarla en el DOM, igual debería de usar el spread operator, aunque no tengo idea de cómo hacerlo.

Cualquier aporte se agradece mucho.

13respuestas
Javascript
Avatar

Por lo que sea el array no sé muestra bien arriba.

const array = [{
 q: "Prueba 1",
 a:"Autor 1"
 },
 {
 q: "Prueba 2",
 a:"Autor 2"
 },
 {
 q: "Prueba 3",
 a:"Autor 3"
 },
 {
 q: "Prueba 3",
 a:"Autor 3"
 },
 {
 q: "Prueba 4",
 a:"Autor 4"
 },
 {
 q: "Prueba 5",
 a:"Autor 5"
 },
]
Avatar

Como he editado un par de veces el post y por lo que sea no me aparece el código de la función, paso y lo pongo en Codepen https://codepen.io/sargentogato/pen/VoyVOJ

DC

El segundo arregló lo llamé array2

Avatar

Diego, el segundo array lo puse tal cual como ejemplo del tipo de array que no soy capaz de dibujar en el DOM. Gracias :)

Avatar

Hola, la forma de almacenar tus datos en un array de objetos está bien ahora sí lo quieres es mostrar todos los datos de tu array en el DOM tienes que recorrer cada posición del array y tomar sus datos y con la ayuda de los template strings puedes dibujar tus datos. Podría ser de la siguiente manera:

// necesitas un elemento en el HTML dónde se insertaran los datos
const CONTENT = document.getElementById('content')

const drawData = ({q, a}) => {
   return `
       <p>${q}<p>
       <p>${a}<p>
   `
}

// array es el nombre de tu lista de datos 
for (data of array) {
   let div = document.createElement('div')
   div.innerHTML = drawData(data)
   CONTENT.appendChild(div)
}
Avatar

Hola Willian Caceres, muchas gracias. Lo que quiero (que no lo dije antes) es sólo mostrar uno de los índices del array no todos a la vez, lo he conseguido, aunque no estoy seguro de haberlo hecho de la forma más eficiente y debería recorrer el array como tú me comentas.

La intención es que cada vez que de click al boton, se muestre el texto contenido dentro de uno de los índices, lo he conseguido, solo que como comento, no estoy seguro de haberlo hecho de correctamente, el código funciona, igual soy yo que al estar empezando tengo la sensación de no estarlo haciendo como toca.

Dejo el codepen https://codepen.io/sargentogato/pen/BXYoma

Dejo en code pen lo que tengo hasta ahora. Mil gracias.

Avatar

Hola el código en si cumple su función y esta bien pero podrías refactorizar tu código un ejemplo seria lo siguiente, espero te sirva. 😀

// seleccionamos el contenedor de los datos y el boton
const CONTENT = document.getElementById('content')
const BUTTON = document.getElementById('buttonGenerate')

const drawData = ({q , a}) => {
    return `
    <div>
        <p>${q}</p>
        <p>${a}</p>
    </div>`
}

// pasamos a la funcion 'drawData' los datos que se encuentran en el indice obtenido aleatoriamente
BUTTON.addEventListener('click', () => {
    CONTENT.innerHTML = drawData(array[Math.floor(Math.random() * array.length)])
})
Avatar

Me parece buena la idea de Wilian.

Mi aporte seria tratar de colocar todo el proceso de mostrado del resultado en una función.

       const content = document.getElementById('quote-text')
       const button = document.getElementById('click-text')

       const showResult = () => {
           let azarNumber = Math.floor(Math.random() * array.length)
           let object = array[azarNumber]
           let data = `
           <div>
               <p>${object.q}</p>
               <p>${object.a}</p>
           </div>`

           content.innerHTML = data
       }

       button.addEventListener('click', showResult)
Avatar

Willian, Angel muchas gracias, ambas respuestas son geniales. Voy a ver cuál de las dos implemento.

La cosa se pone más interesante, porque ahora lo que intento hacer(algo más) es hacer que se muestre no sólo uno de los índices sino 3 de ellos, aunque no me está saliendo. He metido la función dentro de un ciclo for pero nada, no se repite, he probado con el ciclo do/while y while, pero por el motivo que sea no me funciona y no sé dónde está mi error. Voy a intentar implementar el ciclo con las opciones que me habéis dado. Mil gracias.

Avatar

Dale, inténtalo, agota todas las posibilidades y ya por ultimo si tienes alguna duda, lo posteas para ver si logramos darte una mano.

Avatar

Muchas gracias Angel, le dedicaré toda la mañana hasta dar con la respuesta, si veo que no me sale posteo por aquí, prefiero intentarlo hasta agotar opciones y se llego a punto muerto preguntar, es la única manera de ir aprendiendo y poniendo en práctica lo estudiado.

De nuevo muchas, muchas gracias.

Avatar

Os comparto el código.

He optado por utilizar appendChild para introducir los div, he probado con los dos tipos de array. Pero mejor os dejo el código para que lo veáis mejor.

Muchas gracias por vuestras respuestas y código, fue de gran ayuda.

Array con objetos https://codepen.io/sargentogato/pen/rXJoaJ

Array con strings https://codepen.io/sargentogato/pen/VoyVOJ

Avatar

Genial, buscar todas las posibilidades es lo que te ayuda a aprender muchísimo.

Necesitas iniciar sesión para responder.
¿En qué estamos trabajando?
Firebase Android

Curso: Firebase Android

Usa Firebase para autenticación, bases de datos, notificaciones y analíticas de tu app Android