Tenho o seguinte código. Por algum motivo na hora de dar o append
pra mostrar minhas li
comm meus dados ele so mostra o ultimo item do meu array. Por favor alguem me ajude
window.onload = initPage;
async function initPage(){
//pega os dados do banco de dados
const clients = await GetAll( )
show(clients)
}
function show(data) {
//cria uma div customizada
const myDiv = createDiv()
const idSpan = document.createElement('span')
const nameLi = document.createElement('li')
for (let client of data) {
idSpan.textContent = client.id
nameLi.textContent = client.firstName
nameLi.prepend(idSpan)
nameLi.append(myDiv)
document.querySelector('#UlList').append(nameLi)
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="CSS/style.css">
<title>Clientes</title>
</head>
<body>
<header class="cabecalho">
<div class="logo">
<a href="#inicio">
<img src="assets/LogoIcone.png" alt="Logo">
</a>
</div>
<nav class="menu">
<ul>
<li>
<a href="#inicio">Inicio</a>
</li>
<li>
<a href="#mylist" target="_self">Lista</a>
</li>
<li>
<a href="#Logs">Logs</a>
</li>
</ul>
</nav>
</header>
<div id="wapper">
<div id="myform">
<form>
<h3>Entrar em contato</h3>
<input type="text" id="firstName" name="firstName" placeholder="First name"/>
<input type="text" id="lastName" placeholder="Last name"/>
<input type="text" id="phoneNumber" placeholder="Phone number"/>
<input type="email" id="email" placeholder="Email"/>
<input type="password" id="password" placeholder="Sua senha"/>
<input type="button" id="Acao" value="Enviar"/>
</form>
</div>
<div id="mylist">
<h2>List Item Hover Effects</h2>
<ul id="UlList">
</ul>
</div>
</div>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script type="module" src="app.js"></script>
</body>
</html>