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)