Поочередный вывод данных через цикл JS

Question

Нужно сделать поочередный вывод значений объекта через цикл. Делать это надо по клику на кнопку. По сути задача сделать кнопки "Еще/показать далее" которая загружает контент определенного количества

<body>
  <span id="span">Показать еще (загружать по 2 value)</span>

    <script>
    
    // есть объект и данными
    let data = { arr:[prop1='value1',prop2='value2', prop3='value3', prop4='value4', prop5='value5', prop6='value6']};
 
 
    for(let i=0;i<Object.keys(data.arr).length;i++) {
        
        let li;
        
        if(i<2) { // не более двух тегов с данными на странице
        li = document.createElement('LI');
        li.innerHTML = data.arr[i];
        document.body.append(li);
        }
        
          document.getElementById('span').addEventListener('click', function() { 
          
          if(i>2) { // при клике создаются ещё теги
        li = document.createElement('LI');
        li.innerHTML = data.arr[i];
        document.body.append(li)  
              
          }
          
         // нужно чтобы при клике выскакивало по 2 тега, а не все сразу.
          
          
          });
        
    }
 

 </script>
 


</body>

То есть в цикле идет перебор ключей из БД. И на его основе создаются li-шки. Их просто надо создавать при клике, не более (например) 2 штук за клик.

Answer 1

Перебираем массив увеличивая индекс. Выводим в цикле необходимое количество пунктов, начиная с текущего индекса. Если пункты закончились, то делаем кнопку недоступной.

const obj = [{"datetime":"2024-06-20 11:35:33","author":"Eloise","title":"Norfolk Island","text":"Aute duis ipsum voluptate exercitation aliquip ad cupidatat commodo consectetur laboris in tempor. Minim culpa ullamco enim ullamco deserunt nulla elit adipisicing excepteur ex nulla incididunt et ullamco."},{"datetime":"2024-06-01 12:53:29","author":"Minnie","title":"Lesotho","text":"Duis commodo velit Lorem nostrud eiusmod reprehenderit culpa ad aliqua et sunt. Duis ipsum eiusmod non anim elit dolore in."},{"datetime":"2024-01-13 03:40:11","author":"Myrna","title":"Azerbaijan","text":"Nulla ex ex occaecat in ea elit est minim consequat elit ullamco. Id aliquip anim anim quis Lorem cillum quis ad anim enim officia voluptate sunt nisi."},{"datetime":"2024-06-19 04:31:49","author":"Tillman","title":"Bhutan","text":"Cupidatat ut laborum sunt reprehenderit ut nostrud. Nostrud velit fugiat incididunt occaecat occaecat."},{"datetime":"2024-01-27 12:50:16","author":"Bird","title":"Malawi","text":"Ullamco eiusmod velit sit dolore mollit commodo irure deserunt ut cillum cupidatat cupidatat. Occaecat dolore duis dolore magna ea sunt cupidatat adipisicing."},{"datetime":"2024-05-30 08:04:24","author":"Ella","title":"Algeria","text":"Nostrud minim et tempor culpa aliquip commodo do elit mollit sunt culpa commodo incididunt. Proident non irure dolore exercitation anim non id tempor consectetur."},{"datetime":"2024-01-28 11:09:00","author":"Allie","title":"Iran","text":"Eiusmod qui in ex ad labore. Eu magna est magna elit labore eiusmod eu in non sit."}];

let count = 0, step = 2; // step - количество подгружаемых пунктов

function fMore(s) {
  for (let i = 0; i < s; i++) {
    let curr = obj[count++];
    if (curr)
      news.insertAdjacentHTML('beforeend', `<li><strong>${curr.title}</strong><p>${curr.text}</p><small>${curr.datetime}</small> <em>${curr.author}</em></li>`);
    else {
      more.disabled = true; more.textContent = 'Вы просмотрели все записи';
    }
  }
}

more.addEventListener('click', fMore.bind(null, step));
fMore(1); // 1 - начальное количество видимых пунктов

#news { font-size: .75rem; background-color: #fc08; } #news li { margin: .25rem 0; padding: .5em; background-color: #fc08; } #news p { margin: .25rem 0; }

<ul id="news"></ul><button id="more">Ещё...</button>

БЛОГ НА HUSL

Поочередный вывод данных через цикл JS

Ответы (1 шт):