1

Hago una petición a una api que me devuelve un objeto con los datos de usuarios y quiero mostrar sus datos en cards de boostrap en HTML, creándolos desde Javascript. Me comentaron que podría hacerlo utilizando la función Map(), pero al momento de ver el resultado en el navegador, solo me muestra el ultimo usuario registrado

¿Algún consejo?

let response = await this.fetch("http://localhost:3000/users")
const data = await response.json()
const catalog = this.document.getElementById('App')
const element = this.document.createElement('div')
data.map( (valor) =>{
    this.console.log(valor.username)
    element.innerHTML= `<div> 
    <div class="card border-dark mb-3" style="max-width: 18rem;">
    <div class="card-header">${valor.username}</div>
    <div class="card-body text-dark">
    <h5 class="card-title">${valor.firtName}</h5>
    <p class="card-text">${valor.lastName}</p>
    <div class="card-footer bg-transparent border-success">${valor.age}</div>
    </div>
    </div>`
    catalog.appendChild(element)

1 respuesta 1

2

Debes crear el elemento dentro del map (createElement):

let response = await this.fetch("http://localhost:3000/users")
const data = await response.json()
const catalog = this.document.getElementById('App')    
data.map( (valor) =>{
    this.console.log(valor.username)
    let element = this.document.createElement('div')
    element.innerHTML= `<div> 
    <div class="card border-dark mb-3" style="max-width: 18rem;">
    <div class="card-header">${valor.username}</div>
    <div class="card-body text-dark">
    <h5 class="card-title">${valor.firtName}</h5>
    <p class="card-text">${valor.lastName}</p>
    <div class="card-footer bg-transparent border-success">${valor.age}</div>
    </div>
    </div>`
    catalog.appendChild(element)

}

2
  • 1
    Gracias. Funcionó.
    – Leyco
    Commented el 13 dic. 2019 a las 23:16
  • Si te fue de ayuda, no olvides marcarla como respuesta para que le sea de ayuda también a otros usuarios. :P Commented el 14 dic. 2019 a las 19:28

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.