O seu problema é que você está redefinindo o HTML do item após cada iteração (loop). Isso fará com que somente o último ID do array seja mostrado, já que todos os anteriores foram redefinidos pela iteração seguinte.
Desse modo, ao invés de redefinir o conteúdo, você deve simplesmente acrescentar os dados gerados em cada iteração aos dados previamente criados.
Veja o seu problema em um exemplo um pouco mais simples:
const $list = $('#my-list')
const ids = [{ id: 1 }, { id: 2 }, { id: 3 }, { id: 4 }]
for (let i = 0; i < ids.length; i++) {
const id = ids[i].id
const html = `<li>${id}</li>`
console.log('ID atual:', id, ' | HTML atual:', html)
// Note que, ao invés de você acrescentar o HTML gerado ao final da lista,
// você simplesmente está redefinindo todo o HTML definido anteriormente,
// ao usar o método .html().
$list.html(html)
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="my-list"></ul>
Para resolver isso, como mencionado anteriormente, você precisa acrescentar o HTML gerado ao final da lista. Para isso, vamos recorrer ao método append
do jQuery. Assim:
const $list = $('#my-list')
const ids = [{ id: 1 }, { id: 2 }, { id: 3 }, { id: 4 }]
for (let i = 0; i < ids.length; i++) {
const id = ids[i].id
const html = `<li>${id}</li>`
console.log('ID atual:', id, ' | HTML atual:', html)
// Agora, ao invés de redefinir o HTML após cada iteração, estamos simplesmente
// acrescentando o HTML gerado ao conteúdo, já existente, da lista:
$list.append(html)
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="my-list"></ul>
Desse modo, no seu código, você deve trocar o html
(que substitui o HTML já existente por um novo HTML) pelo append
(que acrescenta um novo HTML a um HTML já existente). De:
$(".resultApi").html(dados);
Para:
$(".resultApi").append(dados);
console.log(getApi);
e coloque o resultado disso na sua pergunta – Sorack 21/03/19 às 21:19