お世話になっております。現在関連レコードを一覧画面に表示させるカスタムビューを作成しています。検索してでてきたコードを活用して作成しており現在下記のようになっております。
課題としては、for文内でkintone.apiで他のテーブルからGETしたデータを出力できない状態です。具体的には
var params = { app: related, query: 'name=' + record.place.value };
var resp = kintone.api('/k/v1/records', 'GET', params);
console.log(resp); // respにデータは受け取っている
console.log(resp.records); //受け取ったデータの出力ができない
var resp_data = resp.records.value; //書き方がおそらく違うであろう
for文内でparamsを定義し、kintone.apiのparamsに渡しています。
ログにはresp内にデータはとれているのですが、その先の出力ができていない状態です。respのログは下記のとおりです。
resp.recordsはundefinedになります。
最終的には、関連レコードを取得し一覧表示したいと考えています。
コード全文
(function() {
"use strict";
kintone.events.on('app.record.index.show', function(event) {
if (event.viewName !== 'index1') {
return;
}
var records = event.records;
console.log(records);
if (!records || !records.length) {
document.getElementById('my-customized-view').innerHTML = 'no recode';
return;
}
var recUrl = location.protocol + '//' + location.hostname + '/k/' + kintone.app.getId() + '/show#record=';
var myRecordSpace = document.getElementById('my-tbody');
myRecordSpace.innerHTML = '';
var related = kintone.app.getRelatedRecordsTargetAppId('related_code');
var recUrlrelated = location.protocol + '//' + location.hostname + '/k/' + related + '/show#record=';
for (var i = 0; i < records.length; i++) {
var record = records[i];
var row = myRecordSpace.insertRow(myRecordSpace.rows.length);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
var cell4 = row.insertCell(3);
var cell5 = row.insertCell(4);
var cell6 = row.insertCell(5);
var cell7 = row.insertCell(6);
var tmpA = document.createElement('a');
tmpA.href = recUrl + record.record_code.value;
tmpA.innerHTML = record.record_code.value;
var params = { app: related, query: 'name=' + record.place.value };
var resp = kintone.api('/k/v1/records', 'GET', params);
console.log(resp); // respにデータは受け取っている
console.log(resp.records); //受け取ったデータの出力ができない
var resp_data = resp.records.value; //書き方がおそらく違うであろう
var tmpB = document.createElement('a');
tmpB.href = recUrlrelated + resp_data;
tmpB.innerHTML = resp_data;
cell1.appendChild(tmpA);
cell2.innerHTML = record.name.value;
cell3.innerHTML = record.email.value;
cell4.innerHTML = record.place.value;
cell5.innerHTML = record.date_time_iso.value;
cell6.appendChild(tmpB); // cell6.innerHTML = resp_data[0].作成日時.value;
cell7.innerHTML = record.name.value;
}
});
})();
松田宇弘様
お世話になっております。
cstapの江田と申します。
kintone.apiは非同期処理を行うので、そのあとに書かれた「console.log(resp.records);」が読まれた時点でもレコードの取得が完了していない可能性があります。
kintone.apiのコールバック関数を利用して、取得したレコードを用いる処理はその中で行うようにしてください。
kintone.api(‘/k/v1/records’, ‘GET’, params, function(resp){
console.log(resp);
console.log(resp.records);
…
});
コメントありがとうございます。コールバック関数を試した所、最初の列にはデータを入れることができましたがのこりの列にはデータを入れられていない状況となっております。
console.logにはデータは入っております。
22222と33333を関連レコードのキーにしており。他のテーブルの2222,33333のデータのレコード番号を取得しています。for文で列に値を挿入する点が間違っているのでしょうか？バグの原因が追えずの状態で困っております。。
(function() {
"use strict";
kintone.events.on('app.record.index.show', function(event) {
if (event.viewName !== 'index1') {
return;
}
var records = event.records;
if (!records || !records.length) {
document.getElementById('my-customized-view').innerHTML = 'no recode';
return;
}
var recUrl = location.protocol + '//' + location.hostname + '/k/' + kintone.app.getId() + '/show#record=';
var myRecordSpace = document.getElementById('my-tbody');
myRecordSpace.innerHTML = '';
var related = kintone.app.getRelatedRecordsTargetAppId('related_code');
var recUrlrelated = location.protocol + '//' + location.hostname + '/k/' + related + '/show#record=';
for (var i = 0; i < records.length; i++) {
var record = records[i];
var row = myRecordSpace.insertRow(myRecordSpace.rows.length);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
var cell4 = row.insertCell(3);
var cell5 = row.insertCell(4);
var cell6 = row.insertCell(5);
var cell7 = row.insertCell(6);
var tmpA = document.createElement('a');
tmpA.href = recUrl + record.record_code.value;
tmpA.innerHTML = record.record_code.value;
var tmpB = document.createElement('a');
cell1.appendChild(tmpA);
cell2.innerHTML = record.name.value;
cell3.innerHTML = record.email.value;
cell4.innerHTML = record.place.value;
cell5.innerHTML = record.date_time_iso.value;
var params = { app: related, query: 'name=' + record.place.value };
var resp = kintone.api('/k/v1/records', 'GET', params, function(resp){
var resp_data = resp.records[0].record_code.value;
console.log(resp_data);
tmpB.href = recUrlrelated + resp_data;
tmpB.innerHTML = resp_data;
cell6.appendChild(tmpB);
}, function(resp){
var resp_data = '未提出';
cell6.innerHTML = resp_data;
});
cell7.innerHTML = record.name.value;
}
});
})();
松田宇弘様
お世話になっております。
varで宣言された変数は関数スコープなので、cell6のスコープはforループごとではなくkintone.events.onのコールバック関数となります。 kintone.apiのコールバック関数が実行される時点でのcell6に対してappendChild()が実行されるので想像と異なった挙動となっているのかと思います。
kintone.apiを即時関数で囲うことでこの問題を解決できるかと思います。
(function(){"use strict";kintone.events.on('app.record.index.show',function(event){...for(vari=0;i\<records.length;i++){...(function(cell6){//追加kintone.api('/k/v1/records','GET',params,function(resp){...cell6.appendChild(tmpB);},function(resp){...cell6.innerHTML=resp\_data;});})(cell6);//追加...}});})();
またES5やES6が使える環境であれば、forEach()やletによる変数宣言を用いて対処できます。
理解しました。cell6も変数のようなものだったんですね。
完成したコード参考までに貼り付けておきます。関連レコードで値を一覧に表示したいときにご活用する方いらっしゃると幸いです。また改善スべきところあれば指摘くださいますと勉強になります。
(function() {
"use strict";
kintone.events.on('app.record.index.show', function(event) {
if (event.viewName !== 'index1') {
return;
}
var records = event.records;
if (!records || !records.length) {
document.getElementById('my-customized-view').innerHTML = 'no recode';
return;
}
var recUrl = location.protocol + '//' + location.hostname + '/k/' + kintone.app.getId() + '/show#record=';
var myRecordSpace = document.getElementById('my-tbody');
myRecordSpace.innerHTML = '';
var related = kintone.app.getRelatedRecordsTargetAppId('related_code');
var recUrlrelated = location.protocol + '//' + location.hostname + '/k/' + related + '/show#record=';
for (var i = 0; i < records.length; i++) {
var record = records[i];
var row = myRecordSpace.insertRow(myRecordSpace.rows.length);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
var cell4 = row.insertCell(3);
var cell5 = row.insertCell(4);
var cell6 = row.insertCell(5);
var cell7 = row.insertCell(6);
var tmpA = document.createElement('a');
tmpA.href = recUrl + record.record_code.value;
tmpA.innerHTML = record.record_code.value;
cell1.appendChild(tmpA);
cell2.innerHTML = record.name.value;
cell3.innerHTML = record.email.value;
cell4.innerHTML = record.place.value;
cell5.innerHTML = record.date_time_iso.value;
cell7.innerHTML = record.name.value;
var params = { app: related, query: 'name=' + record.place.value };
(function(cell6){
kintone.api('/k/v1/records', 'GET', params, function(resp){
var resp_data = resp.records[0].record_code.value;
var tmpB = document.createElement('a');
tmpB.href = recUrlrelated + resp_data;
// tmpB.innerHTML = resp_data;
tmpB.innerHTML = '提出済み';
cell6.appendChild(tmpB);
}, function(resp){
var resp_data = '未提出';
cell6.innerHTML = resp_data;
});
})(cell6);
}
});
})();