【Monaca×ニフクラmbaas】ファイルストアにある画像を順番通りにリスト表示させたい

Question

前提・実現したいこと

ニフクラのファイルストアに保存している画像を新しい順でリスト形式に表示したいのですが、表示させるたびに順番が変わってしまいます。
データストアのオブジェクトを検索し該当したファイル名(ファイルストアの画像と同じ)でファイルストアに保存されている画像を取得、リスト形式に表示させようとしています。
その際にリストをタップするとイベントが発生するようにしています。

例）

• 画像1:　イベント1
• 画像2:　イベント2
• 画像3:　イベント3

現在、画像をリスト形式で表示させることはできたのですが、表示させるたびに順番が変わってしまいます。
またリストごとにイベントを追加できたのですが画像と紐付いません。
画像を順番通りに表示させる方法はないでしょうか。
また原因などを探る方法をご教授下さい。

該当のソースコード

function select(category) {
      myNavigator.pushPage('display.html');　　//画面遷移
      var LaundryData = ncmb.DataStore("LaundryData");
      var currentUser = ncmb.User.getCurrentUser();
      LaundryData.equalTo("owner", currentUser.get("userName"))　　//現在ログインしているユーザ、あてはまるカテゴリで検索
                 .equalTo("categoryData", category)
                 .order("laundryName")
                 .fetchAll()
                 .then(function(results) {
                   var markData1 = [];
                   console.log(category + ":" + results.length);
                   for(var i = 0; i < results.length; i++) {
                     var reader = new FileReader();
                     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", "");
                      var img = document.createElement('img');
                      img.setAttribute("wisth", "100");
                      img.setAttribute("height", "100");
                      display.appendChild(list).appendChild(img);
                       var listItems = display.children;
                       for(var i = 0; i < listItems.length; i++) {　　//生成した各リストにイベントを追加
                         listItems[i].firstChild.src = dataUrl;
                         listItems[i].onclick = function(i) {
                           var mark = markData1[i];
                           return function() {
                             result(mark);
                             console.log(mark);
                           }
                         }(i)
                       }
                     });
                     var object = results[i];
                     var imageName = object.laundryName;
                     markData1[i] = object.markData1;
                     console.log(imageName);
                     ncmb.File.download(imageName, "blob")　　//ファイルストアからダウンロード
                         .then(function(blob) {
                           reader.readAsDataURL(blob);
                         })
                         .catch(function(error) {
                           console.log(error);
                         });
                   }
                 })
                .catch(function(error) {
                  console.log(error);
                });

Answer 1

実行する度に順番が異なる理由は、恐らくですがJavaScriptの非同期処理に関連しているのかなと。

下記の ここ の時点では並び順は希望した通りになっているならば、非同期処理のせいです。

for(var i = 0; i < results.length; i++) {
  // ここ
}

非同期処理は ncmb.File.download になります。この処理がforループ中で繰り返し呼ばれるので、ダウンロードできた順に reader.readAsDataURL が呼ばれています。前のダウンロードを追い越して render 変数が上書きされて呼ばれている可能性があります。

解決策としては async/await を使って非同期処理を止める、またはループ処理を別な関数にする手があります。別な関数にすれば、変数の空間が分かれるので、上書きを防止できます。

例えばこんな感じです（ちゃんと動くかは実行していないので保証できません）。ただし、この方法では並び順（ダウンロード完了順）は保証できません。

function select(category) {
  myNavigator.pushPage('display.html');　　//画面遷移
  var LaundryData = ncmb.DataStore("LaundryData");
  var currentUser = ncmb.User.getCurrentUser();
  LaundryData.equalTo("owner", currentUser.get("userName"))　　//現在ログインしているユーザ、あてはまるカテゴリで検索
    .equalTo("categoryData", category)
    .order("laundryName")
    .fetchAll()
    .then(function(results) {
      var markData1 = [];
      console.log(category + ":" + results.length);
      for(var i = 0; i < results.length; i++) {
        // 関数化
        downloadObject(results[i]);
      }
    })
    .catch(function(error) {
      console.log(error);
    });
}

function downloadObject(object) {
  var reader = new FileReader();
  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", "");
    var img = document.createElement('img');
    img.setAttribute("wisth", "100");
    img.setAttribute("height", "100");
    display.appendChild(list).appendChild(img);
     var listItems = display.children;
     for(var i = 0; i < listItems.length; i++) {　　//生成した各リストにイベントを追加
       listItems[i].firstChild.src = dataUrl;
       listItems[i].onclick = function(i) {
         var mark = markData1[i];
         return function() {
           result(mark);
           console.log(mark);
         }
       }(i)
     }
   });
   var object = results[i];
   var imageName = object.laundryName;
   markData1[i] = object.markData1;
   console.log(imageName);
   ncmb.File.download(imageName, "blob")　　//ファイルストアからダウンロード
     .then(function(blob) {
       reader.readAsDataURL(blob);
     })
     .catch(function(error) {
       console.log(error);
     });
}

async/awaitに変更する場合は呼び出し元もasync関数じゃないといけない、また await select で呼び出す形になるので注意してください。例えばこんな感じです。

// asyncに変更
async function select(category) {
  myNavigator.pushPage('display.html');　　//画面遷移
  var LaundryData = ncmb.DataStore("LaundryData");
  var currentUser = ncmb.User.getCurrentUser();
  try {
    // awaitに変更
    var results = await LaundryData.equalTo("owner", currentUser.get("userName"))　　//現在ログインしているユーザ、あてはまるカテゴリで検索
      .equalTo("categoryData", category)
      .order("laundryName")
      .fetchAll();
    var markData1 = [];
    console.log(category + ":" + results.length);
    for(var i = 0; i < results.length; i++) {
      var reader = new FileReader();
      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", "");
        var img = document.createElement('img');
        img.setAttribute("wisth", "100");
        img.setAttribute("height", "100");
        display.appendChild(list).appendChild(img);
         var listItems = display.children;
         for(var i = 0; i < listItems.length; i++) {　　//生成した各リストにイベントを追加
           listItems[i].firstChild.src = dataUrl;
           listItems[i].onclick = function(i) {
             var mark = markData1[i];
             return function() {
               result(mark);
               console.log(mark);
             }
           }(i)
         }
       });
       var object = results[i];
       var imageName = object.laundryName;
       markData1[i] = object.markData1;
       try {
         // awaitに変更
         var blob = await ncmb.File.download(imageName, "blob")　　//ファイルストアからダウンロード
         reader.readAsDataURL(blob);
       } catch (error) {
         console.log(error);
       }
    }
  } catch (error) {
    console.log(error);
  }
}

async/awaitはforループ中のダウンロード完了を待ってしまうので、非同期処理で次々とダウンロードが行われるのに比べると時間がかかってしまいます。ただし並び順は保証できます。

Comments

[yusuke22]

回答ありがとうございます。
イベントと画像の情報は一致させたいので、２つ目のコードを実行しましたが1番下のリストにのみ画像が表示されてしまいました。
すべてのそれぞれのリストに画像を表示したいのですが、改善点ございますでしょうか。

[otak-lab]

forループ内のvar reader = new FileReader();において、readerが何度も書き替えられるので、結果的に最後の画像のみ表示されるのではないでしょうか。

[yusuke22]

回答ありがとうございます。
for文の外に宣言したところ画像表示できました。