Добавлять элементы в список автоматически каждый раз

Question

Мне нужно просмотреть массив один за другим каждый раз и показать в списке, чтобы он автоматически уменьшался по вертикали.

<ul class="list-group">
</ul>

Проблема - все, что у меня есть, это мой массив данных. Как я могу перебирать один за другим каждый раз и показывать в списке?

$(function(){
    var data = GetData();
    $('.list-group').append(data);
});

Answer 1

var data = ['item1','item2','item3','item4'];
var index = 0;
var myinterval;
$(document).ready(function(){
  myinterval = setInterval(addItem, 1000);
});

function addItem()
{
  $('.list-group').append('<li>'+data[index]+'</li>');
  index++;
   if(index == data.length)
    clearInterval(myinterval);
  
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<ul class="list-group">
</ul>

Answer 2

Вы можете перебирать свои данные с помощью forEach и добавлять каждый элемент через интервал:

const data = [1,2,3,4,5];

const list = document.getElementById("list");
data.forEach((x, index) => {
  setTimeout(() => {
    const li = document.createElement("li");
    li.innerHTML = x;
    list.appendChild(li);
  }, index * 1000);
});

<ul id="list"></ul>