1

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>
2
  • Ele só printa o mostra o ultimo item do meu array e ignora o resto Commented 8/11/2020 às 22:07
  • 1
    Está usando a mesma instância e sobrescrevendo somente o valor dela é por causa disso
    – novic
    Commented 8/11/2020 às 22:41

1 Resposta 1

2

Está usando a mesma instância e sobrescrevendo somente o valor, exemplos:

A forma errada:

const names = ["Autur", "Pamela", "Vanessa"];

function show(values) {
  const ulNames = document.getElementById("ulNames");
  const li = document.createElement("li"); // lugar errado
  names.forEach(function(item){    
    li.innerHTML = item;
    ulNames.append(li);
  });
}

show(names);
<ul id="ulNames">
</ul>

A forma certa:

const names = ["Autur", "Pamela", "Vanessa"];

function show(values) {
  const ulNames = document.getElementById("ulNames");  
  names.forEach(function(item){    
    //sempre nova instância
    const li = document.createElement("li"); // lugar certo
    li.innerHTML = item;
    ulNames.append(li);
  });
}

show(names);
<ul id="ulNames">
</ul>

Qual a diferença da forma errada para a certa: na forma certa em cada passagem dentro do forEach é criado uma nova instância do elemento e quando é adicionada na tag ul é um novo item, na forma errada é a mesma instância e com isso só é sobrescrito o seu valor na instância que está fora do forEach.


No seu código é algo assim para arrumar:

function show(data) {
    /cria uma div customizada           
    for (let client of data) {
        const myDiv = createDiv();
        //lugar certo porque são novos itens (novas instâncias)
        //não sobrescrevendo a já criada anteriormente.
        const idSpan = document.createElement('span')
        const nameLi = document.createElement('li')
        idSpan.textContent = client.id
        nameLi.textContent = client.firstName
        nameLi.prepend(idSpan)
        nameLi.append(myDiv)
        document.querySelector('#UlList').append(nameLi)
    }
}
1
  • Obrigado novic consegui... mas apenas para complementar a funçao createDiv() deve ficar dentro do bloco for-of caso contrario acontecera o mesmo que estava acontecendo com as li. mas o codigo funcionou Obrigado... Commented 9/11/2020 às 14:19

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .