取得したJSONデータの表示数をもっと読むボタンで指定して表示させる方法

こんにちは、KNAPの足立です。
今回は取得したJSONデータの表示数をもっと読むボタンで制御する実装をしてみたので、記事にしていこうと思います。

なお、JSONデータはダミーのデータを返してくれるサーバーのJSONPlaceholderを使用させていただいてます。

実装はこちら

See the Pen MoreBtn by knap_develp (@knap_develp) on CodePen.

非同期でデータを取得

const resJson = async () => {
  try {
    const res = await fetch(jsonUrl);
    const resPost = await res.json();
    postsData = resPost;
    displayPosts(3); 
  } catch (error) {
    console.error('Error fetching data:', error);
  }
}

まずasyncを使って非同期でjsonデータを取得し、取得した後displayPosts関数を呼び出します。

JSONデータを個数指定して表示させる関数displayPostsを作成する

const displayPosts = (count) => {
  const fragment = document.createDocumentFragment();
  for (let i = currentIndex; i < currentIndex + count && i < postsData.length; i++) {
    const post = postsData[i];
    const postElement = document.createElement('div');
    postElement.classList.add('l-user_item');
    postElement.insertAdjacentHTML('beforeend', `
    <span class="">${post.id}</span>
    <p class="">${post.name}</p>
    `);
    fragment.appendChild(postElement);
    postsContainer.appendChild(fragment);
  }
  currentIndex += count;
  if (currentIndex >= postsData.length) {
      moreButton.style.display = 'none';
  }
}

この関数は呼び出す際に指定した引数のcountの数だけ取得しているJSONデータを表示させる役割を持っていて、for文内で、JSON内の全てのデータ数と現在表示している個数（currentIndex）を超えないように制御することで、指定した数だけ表示させる処理を実装できます。
あとはもっと読むボタンを押すたびにdisplayPosts関数を呼び出してあげて、そしてJSON内の全てのデータ数に現在表示している個数が追いついたらボタンは必要ないので削除させます。

こんな感じです！
では本日はこのへんで〜