ボタンクリック時の処理でループ変数を保持したい

javascript初学者です。

kintoneというよりはjavascriptの問題だと思いますが、以下ご教授いただけると大変助かります。

背景・実現したいこと

イベント:新規レコード作成時、既存レコード編集時

処理:

テーブルA(元テーブル)の行を、スペースに生成したボタンをクリックしたときに、テーブルB (分割テーブル)に、条件に応じて”枝番”を付与して行追加したい。

 

エラー情報

・枝番がループ最後の値になってしまいます。

・おそらくこのあたりの問題だと思っていますが、解決法がわからず困っております。 

https://qiita.com/ukiuni@github/items/463493a690265cec8bb7

  1. ボタンクリック前

  2. ボタンクリック後

  3. コンソールログ

 

利用したソースコード

(function() {
'use strict';
kintone.events.on(['app.record.create.show','app.record.edit.show'], function(event) {
var myBtn = document.createElement('button');
myBtn.id = 'my_button';
myBtn.innerText = '分割処理';
myBtn.onclick = function() {
var record = kintone.app.record.get();
var originalTableForSplited = []; //元テーブルから分割対象を一時的に保管
var originalTable = record.record['元テーブル'].value;
var splitedTable = record.record['分割テーブル'].value;

for(var i=0;i<originalTable.length;i++){
if(originalTable[i].value['分割対象'].value.length != 0){ //分割対象にチェックが付いている行を対象とする
originalTableForSplited.push(originalTable[i]); //対象行を保管
for(var j in originalTable[i].value){
originalTable[i].value[j].disabled = true; //その行の各フィールドを編集不可にする
}
}
}
console.log(originalTableForSplited);

for(var k=0;k<originalTableForSplited.length;k++){
var templateSplitedRow = {'value':{
'項番_分割':{'value':'','type':'NUMBER'},
'枝番':{'value':'','type':'NUMBER'},
'タイトル_分割':{'value':'','type':'SINGLE_LINE_TEXT'}}};
var tmpCount = originalTableForSplited[k].value['件数'].value;
if(tmpCount == 1){
//件数が1件の場合はそのまま枝番1で追加
var tmpSplitedRow = templateSplitedRow;
tmpSplitedRow.value['項番_分割'].value = originalTableForSplited[k].value['項番'].value;
tmpSplitedRow.value['枝番'].value = 1;
tmpSplitedRow.value['タイトル_分割'].value = originalTableForSplited[k].value['タイトル'].value;

console.log(tmpSplitedRow);
splitedTable.push(tmpSplitedRow); //分割テーブルに追加

}else{
//件数が2件以上の場合は分割して枝番を採番

//念の為、小数点切り捨て
var ampliCnt = Math.floor(tmpCount)

//件数分分割
for(let m=1; m<=ampliCnt;m++){
var tmpSplitedRow = templateSplitedRow;
console.log('枝番:'+m);
tmpSplitedRow.value['項番_分割'].value = originalTableForSplited[k].value['項番'].value;
tmpSplitedRow.value['枝番'].value = m; //←ここが思ったように出せない
tmpSplitedRow.value['タイトル_分割'].value = originalTableForSplited[k].value['タイトル'].value;
console.log(tmpSplitedRow);
splitedTable.push(tmpSplitedRow); //分割テーブルに追加
}
}
if(splitedTable[0].value['項番_分割'].value == ''){ //分割テーブルの先頭行が空白行だったら削除
splitedTable.splice(0,1);
}
//最後に分割テーブルをセットする
kintone.app.record.set(record);
}


} //onclick関数end
kintone.app.record.getSpaceElement('btn').appendChild(myBtn);

return event;
});
})();

 

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

昔私もハマったことがあります:sweat_drops:

var tmpSplitedRow = templateSplitedRow;
ここで、tmpSplitedRowはtemplateSplitedRowになってしまいます。(参照渡し)

コンソールの「オブジェクト」の隣に 「i」のアイコンがでてくると思いますが、それをマウスオーバーすると
英語でなにか注意書きが出てくると思います。「実行時点じゃなくて、最終的な結果だよ」みたいな意味だと思います。
「i」のアイコンをマウスオーバーして出てくる英語をググってみて下さい。

tmpSplitedRow は参照渡しによって 全部の行がtemplateSplitedRow になってしまっています。

var templateSplitedRow = {‘value’:{
‘項番_分割’:{‘value’:‘’,‘type’:‘NUMBER’},
‘枝番’:{‘value’:‘’,‘type’:‘NUMBER’},
‘タイトル_分割’:{‘value’:‘’,‘type’:‘SINGLE_LINE_TEXT’}}};

コレそのものが
tmpSplitedRow に入っている感じです。コピーではなくてそのものが入っている感じです。

対処法としては

var tmpSplitedRow = templateSplitedRow;

ではなくて

var tmpSplitedRow = {‘value’:{
‘項番_分割’:{‘value’:‘’,‘type’:‘NUMBER’},
‘枝番’:{‘value’:‘’,‘type’:‘NUMBER’},
‘タイトル_分割’:{‘value’:‘’,‘type’:‘SINGLE_LINE_TEXT’}}};
とやるといいと思います。毎回新しい行を作る感じになります。

 

ちなみに
https://qiita.com/ukiuni@github/items/463493a690265cec8bb7
この記事とは関係ないと思います。

↓こちら参考になるかと思います
https://kojimanotech.com/2020/05/01/213/

間違っていたら・・・スミマセン。

juridonさん

 

早速のご返信ありがとうございます。

なるほど、参照渡しになってしまっていたんですね…。

全くその辺は意識していなかったです。コンソールの「i」の情報もしっかりと確認しないといけないですね。

 

ご提示いただいたやり方で無事に想定通りの挙動になりました。

行き詰まっていたので本当に感謝です。参考ページもありがとうございます!