【Monaca×ニフクラmbaas】データストアから取得した値が順番通りに表示されない。

Question

【Monaca×ニフクラmbaas】データストアから取得した値が順番通りに表示されない。

データストアから取得したobjectを元にニフクラのファイルストアに保存している画像をでリスト形式に表示しているのですが、どうしても取得した配列の順番通りに表示されません。

ーーーー参考文献ーーーー
こちらを参考に組んでいます。
【Monaca×ニフクラmbaas】ファイルストアにある画像を順番通りにリスト表示させたい

例）
画像をリスト形式で表示させることはできたのですが、表示させるたびになぜか最終番地が繰り返されてしまいます。
同期/非同期の問題になってくるのでしょうか。。。
順番通りに表示させる方法はないでしょうか。
また原因などを探る方法をご教授下さい。

取得配列

エラーメッセージ

現状の表示内容

該当のソースコード

async function select() {
      var Prize_List = ncmb.DataStore("Prize_List");
      try {
        // awaitに変更
        var results = await Prize_List.fetchAll();
        console.log(results);
        var reader = new FileReader();
        for (var i = 0; i < results.length; i++) {
          var object = results[i]
          console.log(object)
         
           reader.onload = ( function (e) {
             var dataUrl =  reader.result;
            var display = document.getElementById('display');//HTMLにあるons-listタグを取得
            var list = document.createElement('ons-list-item');
            list.setAttribute("modifier", "chevron");
            list.setAttribute("tappable", "");
            list.setAttribute("style", "width: 70%; margin: 5% auto 5% auto; padding: 0; ")
            var img = document.createElement('img');
            img.setAttribute("wisth", "100");
            img.setAttribute("height", "100");
            img.setAttribute("style", "margin: 5% auto 5% auto;")
            img.setAttribute("src", dataUrl)
            display.appendChild(list).appendChild(img);
            var p1 = document.createElement("div");
            p1.setAttribute("class", "list-item__title")
            p1.setAttribute("style", "text-align: center;")
            var text1 = document.createTextNode(object.prizeName);
            console.log(object.prizeName)
            p1.appendChild(text1);
            display.appendChild(list).appendChild(p1);
            var p1 = document.createElement("div");
            p1.setAttribute("class", "list-item__subtitle")
            p1.setAttribute("style", "font-size: 25px; padding: 10px; color: #3ED23A; text-align: center;")
            var text1 = document.createTextNode(object.prize_price + "PEN");
            console.log(text1)
            p1.appendChild(text1);
            display.appendChild(list).appendChild(p1);
            var listItems = display.children;
            for (var k = 0; k < listItems.length; k++) {　　//生成した各リストにイベントを追加
              listItems[k].firstChild.src = dataUrl;
              listItems[k].onclick = function (k) {
                return function () {
                  console.log(listItems[k])
                  var imgUrl = listItems[k].firstChild.src
                  var prizePrice = results[k].prize_price
                  var prizeName = results[k].prizeName
                  console.log(imgUrl, prizePrice, prizeName)
                  pay(imgUrl, prizePrice, prizeName)
                }
              }(k)
            }

          });
          var imageName = object.image_filename;
          console.log(imageName)
          try {
            console.log("画像取得中")
            // awaitに変更
            var blob = await ncmb.File.download(imageName, "blob")　　//ファイルストアからダウンロード
            console.log("画像取得完了")
            reader.readAsDataURL(blob);
          } catch (error) {
            console.log(error);
          }
        }

      } catch (error) {
        console.log(error);
      }
    }

Answer 1

自分自身の環境で再現させていなので想像になりますが

          var object = results[i]

でfor内で同じobjectを使いまわしてるのが原因ではないかと思います。
forの処理を関数にして引数で必要なのを渡すのが良いのかな…

Answer 2

ありがとうございます！解決いたしました！
なぜobjectの使い回しが原因かはわかりませんが、無事想定している表示順になりました。

考られる理由としては、画像取得を待機している間にFor文が回ってしまっていたのではという解釈になりました。
こんな初歩的ミスに数日間も囚われていたと思うと自分が情けないです、、、

参考までに改変後のコードを掲載いたします。

改変後
for (var i = 0; i < results.length; i++) {
          var object = results[i]
          await prizeCreate(object, results)
          console.log(object)

        }