一覧のカスタマイズビューで「コメント一覧」を表示させたい

いつも大変お世話になっております。
コメント取得APIを利用し、カスタマイズビュー画面にコメントを表示させたいと考えています。

「レコード番号」「作成者」「コメント」の順で表示させようと下記を動かしましたが、
「レコード番号」と「作成者」は全て最終レコードの内容が表示されてしまいました。
(「コメント」は期待通り全件表示されています)

ご助言賜われれば幸甚です。
何卒どうぞよろしくお願いいたします。

var recUrl = location.protocol + “//” + location.hostname + “/k/” + kintone.app.getId() + “/show#record=”;
var myRecordSpace = document.getElementById(“my-tbody”);
myRecordSpace.innerHTML = “”;

// コメント取得
for(var i=0; i<event.records.length; i++){

    var record = event.records[i];

    var myUrl = “/k/v1/record/comments”;
    var myParams = {
        “app” : kintone.app.getId(),
        “record” : record.$id.value,
        “order” : “asc”
    }

    kintone.api(myUrl, “GET”, myParams).then(function(resp) {
        if(resp.comments.length !== 0){
            var row = myRecordSpace.insertRow(myRecordSpace.rows.length);

            //レコード番号
            var cell0 = row.insertCell(0);
            var tmpA = document.createElement(“a”);
            tmpA.href = recUrl + record.$id.value;
            tmpA.target = “_blank”;
            tmpA.innerHTML = record.$id.value;
            cell0.appendChild(tmpA);

            //作成者 
            var cell1 = row.insertCell(1);
            cell1.innerHTML = record.作成者.value.name;

            //コメント
            var cell2 = row.insertCell(2);
            for(var k=0; k<resp.comments.length; k++){
                cell2.innerHTML += resp.comments[k].creator.name + “:” + resp.comments[k].text + “<br>”;
            }
        }
    }, function(error) {
        if (error.message !== undefined) {
            var errmsg = error.message;
        }
    });
}

石井健太郎さん
cstapの瀧ヶ平です

kintone APIにおける非同期処理ではありがちなことなのですが、for文で回している最中にfor文内で定義された変数を利用する場合、kintone.APIでは非同期、つまり通信が終わった段階で.then以下の処理を行うため、変数recordの中身は通信を開始した(kintone.apiを実行した)タイミングのものであるとは限りません。(非同期処理に関しては理解していないとかなり面倒なのでこちら等読むと良いかと思います。) 

これの対処法としては、.thenに渡す関数をクロージャーを利用して

.then((function(record){
return function(resp) {
// もともとあった処理
};
})(record));

などのようにして書くか、Function.prototype.bind関数によってthisをバインドして

.then((function(resp) {
// もともとの処理での record の部分を this に書きなおす
}).bind(record));

というように修正して書くなどの方法があります。

おそらく最後のレコードのコメントだけが取得されているのではなく、コメントに対応するレコードとコメントの文章がマッチしていないだけだと思います。

瀧ヶ平さま

いつも大変お世話になっております。
素早いご回答誠にありがとうございました。

リンク先を拝読し、まだ完全には理解できていないものの、
非同期処理にfor文を適用できないことは把握いたしました。

頂戴した対処法を両方共試してみたのですが、
カスタマイズビューに何も表示されませんでした。

対処法については全く理解できてませんので、何がわからないのかもわかっておりません。
勉強不足で申し訳ございません。

賜ったご回答を熟読し理解できるよう努めますが、
可能であるならば今少しヒントをいただけると幸甚です。

返答が遅れるのも失礼かと思い取り急ぎ御礼まで申し上げます。
今後とも何卒どうぞよろしくお願いいたします。

瀧ヶ平さま

いつも大変お世話になっております。
結論から申し上げますと、クロージャを利用し実現できました。
ありがとうございました。

var recUrl = location.protocol + "//" + location.hostname + "/k/" + kintone.app.getId() + "/show#record=";
var myRecordSpace = document.getElementById("my-tbody");
myRecordSpace.innerHTML = "";

function closure(){
var i = 0;
return function(){
var record = event.records[i];
var myUrl = "/k/v1/record/comments";
var myParams = {
"app" : kintone.app.getId(),
"record" : record.$id.value,
"order" : "asc"
}
kintone.api(myUrl, "GET", myParams).then(function(resp) {
if(resp.comments.length !== 0){
var row = myRecordSpace.insertRow(myRecordSpace.rows.length);

// レコード番号
var cell0 = row.insertCell(0);
var tmpA = document.createElement("a");
tmpA.href = recUrl + record.$id.value;
tmpA.target = "_blank";
tmpA.innerHTML = record.$id.value;
cell0.appendChild(tmpA);

// 作成者
var cell1 = row.insertCell(1);
cell1.innerHTML = record.作成者.value.name;

//コメント
var cell2 = row.insertCell(2);
for(var k=0; k<resp.comments.length; k++){
cell2.innerHTML += resp.comments[k].creator.name + ":" + resp.comments[k].text + "<br>";
}

}
}, function(error) {
if (error.message !== undefined) {
var errmsg = error.message;
}
});
i++;
};
}
var getComments = closure();
for(var i=0; i<event.records.length; i++){
getComments();
}