ajaxで取得したデータを全て表示できない

Question

無限スクロールを作っていますが、ajaxで取得したデータを元に要素を生成したいのですが、毎回１つか２つ生成されず抜けがあります。データは全てサーバーから取得できているためjs内に問題があります。

追記
TypeError: Cannot read properties of undefined (reading 'user_id')とエラーを吐きました。「 this.AjaxCommentUser(data.comments[i].user_id)」が問題の箇所ですが、data.commentsの各オブジェクト内にuser_idはあるのでなぜこのようなエラーを返すのかわかりません

該当のソースコード

        methods: {
          AjaxAddContent() {
            if (!this.itemLoading) { //読み込み中は読み込めないようにする
              this.itemLoading = true
              // 追加コンテンツ
              fetch('/ajax/getSidebarComment', {
                method: 'POST',
                body: new URLSearchParams({
                  count: this.page
                }),
                headers: {
                  'X-CSRF-TOKEN': gid("jsHandOvers").dataset.csrf
                },
              }).then(res => {
                return res.json();
              }).then(data => {
                // console.log(data.comments.length)
                let AddContent = "";
                for (let i = 0; data.comments; i++) {
                  this.AjaxCommentUser(data.comments[i].user_id)
                    .then(user => {
                      this.AjaxCommentArticle(data.comments[i].article_id)
                        .then(article => {
↓ここで要素を作るがなぜか抜けがある
                          AddContent +=
                            `<div class="streamTile"><div><a href="/articles/${data.comments[i].article_id}?id=${data.comments[i].id}"></a><div class="userInfo"><a href="/users/${user.userID}"><div class="userIcon"><img src="/storage/${user.icon || 'icon/initial.jpeg'}" class="icon"></div><div><div class="userName _ellipsised">${user.name || '氏名'}</div><div class="userID">@${user.userID}</div></div></a><div class="commentDate">${data.comments[i].updated_at}</div></div><div class="commentArea"><div class="comment _ellipsised">${data.comments[i].body || ''}</div></div><div class="titleArea"><div class="title _ellipsised">${article.title}</div></div></div></div><div class="tileSeparator"></div>`;
                          if (data.comments.length - 1 === i) {
                            $('#timelineContainer').append(AddContent);
                            this.page += data.comments.length
                          }
                        }).catch(err => {});
                    }).catch(err => {});
                }
              }).catch(err => {
                // console.log(err.response)
                this.itemLoading = false
              }).finally(hoge => {
                this.itemLoading = false
              });
            }
          },
          async AjaxCommentUser(user_id) {
            let res = await fetch(`/ajax/users/${user_id}`, {
              method: 'POST',
              headers: {
                'X-CSRF-TOKEN': gid("jsHandOvers").dataset.csrf
              },
            });
            let data = await res.json();
            return data.user;
          },
          async AjaxCommentArticle(article_id) {
            let res = await fetch(`/ajax/articles/${article_id}`, {
              method: 'POST',
              headers: {
                'X-CSRF-TOKEN': gid("jsHandOvers").dataset.csrf
              },
            });
            let data = await res.json();
            return data.article;
          },
        }
      }).mount("#timelineContainer");

試したこと

「ajax 全て表示」等で検索

補足情報（FW/ツールのバージョンなど）

PHP 8.1.1
Laravel 8.79.0

Comments

[退会済みユーザー]

await が抜けてるところがあるのでは？

[hoshi-takanori]

catch(err => {}) でエラーが握りつぶされてるかも？

[yambejp]

ちなみにfetchはXMLHttpRequestではないのでajaxと呼ぶべきかどうかは判断が分かれます

[suika11]

SurferOnWwwさん
どこかが非同期処理になってしまっているようですね

hoshi-takanoriさん
その中でconsole.log(err)したら「TypeError: Cannot read properties of undefined (reading 'user_id')」と返ってきました

yambejpさん
ありがとうございます。

[hoshi-takanori]

int32_t さんの回答にある通り、ループの終了条件がおかしいために無限ループになり、data.comments の個数よりも　i が大きくなると data.comments[i] が undefined なので user_id にアクセスできなくてエラーになってるのでしょうね。が、表示漏れの原因はそれではなく、非同期で結果が返ってくる順番の問題だと思います。
ちなみに、user や article を一つ一つ分けて取得するのは効率が悪いので、API を修正できるなら getSidebarComment でまとめて返すようにした方がいい気がします。

[suika11]

hoshi-takanori
ありがとうございます。getSidebarCommentで全て取得したら思い通りの処理を実現できました

Answer 1

fetchはpostのデータ私はformdataが基本ですが認識はあっていますか？
切り分けが必要。fetch().then(res=>res.json()).then(console.log)で想定したデータが取れるか確認します。受け取れてなければfetchの問題、受け取れていて表示がおかしいならその後の処理の問題

Comments

[suika11]

for文の直前の段階では想定データは取得できていました。なのでfor文の中に問題があると睨んでいます

[yambejp]

そうなるともうfetchはおいておいて、特定の配列から一定の表示をすることに集中してください

Answer 2

                for (let i = 0; data.comments; i++) {

(ループ終了条件がおかしいですがそれは本題ではありません)
このループで data.comments に対して一斉に非同期処理を開始していますが、

                          if (data.comments.length - 1 === i) {
                            $('#timelineContainer').append(AddContent);

このコードが呼ばれるのが data.comments の順番どおりとは限らないため、この条件を満たした後の非同期処理の結果が捨てられているようにみえます。

ループの中で await して data.comments の順番どおりに非同期処理の結果を処理をするか、Promise.all() ですべての非同期処理が完了するのを待ってから AddContent を画面に出すべきでしょう。

Answer 3

getSidebarCommentの一度でデータを取得したら全ての要素を表示できました