一覧画面(index.show)でのinnerHTMLについて

kintone カスタマイズ
1

お世話になります。

 

掲題の件、一覧画面の表示イベント(index.show)で他アプリからGETした値をinnerHTMLで表示したいのですがうまくいきません。

以下、コードです。

======================================================

(function() {
“use strict”;

// 一覧ページ
kintone.events.on(‘app.record.index.show’, function(event) {

var records = event.records;

var masterAppId = 80;
var appinf1 = kintone.app.getFieldElements(‘test’);

for (var i = 0; i < records.length; i++) {

var record = event.records[i];
var no = record[‘No’][‘value’];
var query = ‘No="’ + no + ‘" order by 作成日時 desc limit 1’;

// DOM要素の取得
var part1 = appinf1[i];

//リクエストを行う
kintone.api(‘/k/v1/records’, ‘GET’, { “app”: masterAppId, “query”: query}, function (resp) {

part1.innerHTML = resp[‘records’][0][‘name’][‘value’];

});

}

});
})();

======================================================

別アプリのNoと同じもの(必ず同じものがあるという環境です)をGETし、「name」を取得し表示というコードです。

コンソールでログを出力してみたのですが、GET自体は正常に終了しており「name」も取得できておりますが、

innerHTMLでの表示だけができておりません。

 

これは、GETが終了する前にjavascriptの処理が終了してしまっているのでしょうか？

それとも、そもそもGETで取得した値はinnerHTMLで使用できないのでしょうか？

 

ご教示いただければ幸いです。

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

2

y-kishiさん
cstapの瀧ヶ平です

他所でもよく指摘されていますが、APIでの取得が非同期で行われるので、part1という変数はAPIでの取得が終わる段階でfor文での次の値に変わってしまっているためうまくいかないのだと思います。

そのため、正しく行いたいのであれば、クロージャを利用して環境を束縛し変数の遷移を防ぐか、APIでの取得を直列化する方法が考えられます。

この場合は直列化するほどの処理でもないので、前者を使うのが妥当かと思います。その場合以下のような関数を返却する関数を用意し、

var getWriterFunc = function(element) {
return function(resp) {
element.innerHTML = resp.records[0].name.value;
};
};

リクエストのコールバックの引数に与える際に関数を得ることで解決します。

kintone.api(/* 中略 */, getWriterFunc(part1));

参考になりますでしょうか？

3

cstap 瀧ヶ平 様

お世話になっております。

 

ご回答いただきありがとうございます。

また、サンプルコードまでいただき大変助かりました。

結果クロージャを利用することで希望通りの動作となりました。

 

以下、一応コードを共有させていただきます。

======================================================================

(function() {
“use strict”;

// 一覧ページ
kintone.events.on(‘app.record.index.show’, function(event) {

var records = event.records;

var masterAppId = 80;
var appinf1 = kintone.app.getFieldElements(‘test’);

var getWriterFunc = function(element) {
return function(resp) {
element.innerHTML = resp.records[0].name.value;
};
};

for (var i = 0; i < records.length; i++) {

var record = event.records[i];
var no = record[‘No’][‘value’];
var query = ‘No="’ + no + ‘" order by 作成日時 desc limit 1’;

// DOM要素の取得
var part1 = appinf1[i];

//リクエストを行う
kintone.api(‘/k/v1/records’, ‘GET’, { “app”: masterAppId, “query”: query}, getWriterFunc(part1));

}

});
})();

======================================================================