他アプリの画像複数取得

OKAと申します。

下記サイトに記載のPopModalを利用し、レコードsubmit時に画像をクリックしてメッセージを出す仕掛けを作りたいのですが、画像をうまく取得できません。

画像は他アプリのレコード内添付ファイルを参照しています。

複数表示したいのですが、最初の1件しか表示できません。

原因等お気づきの点をご教示いただけますと幸いです。

よろしくお願い致します。

 

https://cybozudev.zendesk.com/hc/ja/articles/213200083-popModal%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%A6%E3%82%A2%E3%83%97%E3%83%AA%E3%81%AE%E8%AA%AC%E6%98%8E%E3%82%92%E3%81%8D%E3%82%8C%E3%81%84%E3%81%AB%E3%81%BE%E3%81%A8%E3%82%81%E3%82%88%E3%81%86- 

 

var offset = 0;
var related = 10; // ファイル管理アプリのID

var query = ‘’;
query = encodeURIComponent(query);
var appUrl = kintone.api.url(‘/k/v1/records’) + ‘?app=’+ related + ‘&query=’ + query;

// 同期リクエスト
var xmlHttp = new XMLHttpRequest();
xmlHttp.open(“GET”, appUrl, false);
xmlHttp.setRequestHeader(‘X-Requested-With’,‘XMLHttpRequest’);
xmlHttp.send(null);

//取得したレコードをArrayに格納
var resp_data = JSON.parse(xmlHttp.responseText);

if(resp_data.records.length > 0) {

var dialog_str = ‘<div id=“dialog_content_1” class=“dialog_content” style=“display:none;”>’ +
‘<div class=“dialogModal_header”>クリックしてください</div>’ +
‘<div class=“dialogModal_content”>’;

for(var i = 0; i < resp_data.records.length; i++) {
var url = ‘/k/v1/file.json?fileKey=’ + resp_data.records[i][‘ファイル’][‘value’][0][‘fileKey’];
var xhr = new XMLHttpRequest();
xhr.open(‘GET’, url, true);
xhr.setRequestHeader(‘X-Requested-With’, ‘XMLHttpRequest’);
xhr.responseType = ‘blob’;
xhr.onload = function() {
if (xhr.status === 200) {
var blob = new Blob([xhr.response]);
var url = window.URL || window.webkitURL;
var blobUrl = url.createObjectURL(blob);
var img_element = document.createElement(‘img’);
img_element.src = blobUrl;
img_element.style.cursor = ‘pointer’;
img_element.onclick = function () {
ClickStamp(); // クリック時処理
}
$(‘.dialogModal_content’).append(img_element);

 

$(myHeaderSpace).append(dialog_1);

} else {

}
};

xhr.send();
}
dialog_str += ‘</div>’ + ‘</div>’;
var dialog_1 = $(dialog_str);
$(myHeaderSpace).append(dialog_1);

}

たぶん、非同期でファイル取得しているためだと思います。
非同期だと応答を待たずに次のリクエストを実行します。結果的に複数ファイルほぼ同時に応答が帰ってきます。 
同期処理にするか、promise 処理にするかして、順番にファイル取得するとできると思います。

ファイルのpromise 処理は、kintone ファイルのダウンロードとアップロード に例があります。

 

rex0220様

ご返信が遅くなり申し訳ありません。

ご教示いただきありがとうございます。同期処理で実現できるか確認してみます。