Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

[Dúvida] Mostrar o elemento no HTMl e não o índice.

Prezado, Por gentileza, estou tentando mostrar um item no HTML mais está retornando o índice ao invés do elemento. Como posso corrigir o código ?Poderiam me dar uma dica?

1 resposta
solução!

Oi, Nilson.

Pra identificar exatamente onde está o ajuste necessário, seria muito importante que você colasse aqui o trecho do seu código (JavaScript e HTML).

Mas, esse comportamento é muito comum quando confundimos os tipos de laços de repetição (loops) ao percorrer uma lista. O cenário mais provável é que você esteja utilizando o for...in.

No JavaScript, existe uma diferença fundamental:

  • for (let i in lista): Percorre os índices (as posições: 0, 1, 2...).
  • for (let item of lista): Percorre os elementos (o valor real que está guardado).

Se o seu código estiver parecido com este exemplo abaixo, ele vai mostrar apenas os números:

let frutas = ["Maçã", "Banana", "Uva"];

for (let fruta in frutas) {
    // Isso vai imprimir 0, 1, 2... (os índices)
    document.querySelector("ul").innerHTML += `<li>${fruta}</li>`;
}

Pra corrigir e mostrar o elemento, você tem duas opções.

Opção 1: Usar o for...of

for (let fruta of frutas) { // Troquei "in" por "of"
    // Isso vai imprimir Maçã, Banana, Uva...
    document.querySelector("ul").innerHTML += `<li>${fruta}</li>`;
}

Opção 2: Usar o índice para acessar a lista

Se você precisar manter o primeiro formato, deve lembrar de usar o índice para "pescar" o valor dentro da lista original:

for (let i in frutas) {
    // Uso o "i" para acessar frutas[i]
    document.querySelector("ul").innerHTML += `<li>${frutas[i]}</li>`;
}

Se não for esse o caso, poste seu código aqui para analisarmos.

Alura Conte com o apoio da comunidade Alura na sua jornada. Abraços e bons estudos!