# レコード一覧画面でボタン押下時に、指定のレコードのサブテーブルに行を追加する
**URL:** https://community.cybozu.dev/t/topic/2551
**Category:** kintone 開発相談
**Created:** [2016 年 6 月 22 日午前 8:55 UTC](https://community.cybozu.dev/t/topic/2551 "2016-06-22T08:55:10Z")
**Posts on this page:** 13
**Page:** 1
### Author:  [@Legacy\_Account2111](https://community.cybozu.dev/u/Legacy_Account2111)
#### Post date: [2016 年 6 月 22 日午前 8:55 UTC](https://community.cybozu.dev/t/topic/2551/1 "2016-06-22T08:55:10Z")
お世話になっております。
[https://cybozudev.zendesk.com/hc/ja/community/posts/200907434-JavaScript%E3%81%A7%E3%83%86%E3%83%BC%E3%83%96%E3%83%AB%E3%81%AE%E8%A1%8C%E8%BF%BD%E5%8A%A0](https://cybozudev.zendesk.com/hc/ja/community/posts/200907434-JavaScript%E3%81%A7%E3%83%86%E3%83%BC%E3%83%96%E3%83%AB%E3%81%AE%E8%A1%8C%E8%BF%BD%E5%8A%A0)
上記を参考に、レコード一覧画面に設置したボタンを押下→対象のレコードにあるサブテーブルに
行を追加するコードを書きましたが、動作しません。
現在のコードは以下の通りです。(GETで、対象のレコードは正常に拾えています。)
======================================================================================
//ボタン押下時のイベント
bthozon.onclick = function () {
var masterAppId = 123;
var query = ‘レコード番号="’ + recno + ‘"’;
// CSRFトークンの取得
var token = kintone.getRequestToken();
// 登録先アプリの設定
var appURL = kintone.api.url(‘/k/v1/record’);
kintone.api(
kintone.api.url(‘/k/v1/records’, true),
‘GET’, {
app: masterAppId,
query: query
},
function(resp) {
//レコードがあった場合の処理
if (resp.records.length) {
var insertedRow = { // テーブルへの追加行
“value” : {
“tb1” : {
“value” : “テストです”
},
“tb2” : {
“value” : “テストです”
},
“tb3” : {
“value” : “テストです”
},
“tb4” : {
“value” : “テストです”
},
"tb15 : {
“value” : “テストです”
}
}
};
resp.records[0].テーブル.value.push(insertedRow); // 取得したレコードJSONのテーブルの最終行に追加
// JSONの設定
var strJSON = ‘{ “app”: masterAppId,“id”: recno, “record” : { “テーブル” : { “value” :’ + resp.records[0].テーブル.value + ‘}},“REQUEST\_TOKEN”:"’ + token + ‘" }’; // テーブル部分をリクエスト用JSONに組込み
var xmlhttp = new XMLHttpRequest();
xmlhttp.open(“PUT”, appURL, false);
[//xmlhttp.open](https://xmlhttp.open)(“PUT”, appURL, true);
xmlhttp.setRequestHeader(‘X-Requested-With’,‘XMLHttpRequest’);
xmlhttp.setRequestHeader(‘Content-Type’,‘application/json’);
xmlhttp.send(strJSON);
if (xmlhttp.status == 200) {
//成功した時の処理
window.alert(“アタックリスト「” + recname + “」への電話履歴を追加しました”);
}else{ //削除失敗
//失敗した時の処理
}
//レコードがなかった場合の処理
} else if (!resp.records.length) {
window.alert(“レコードはありませんでした”);
}
}); //GETのresp終了
} //電話内容保存ボタンのクリックイベント終了
======================================================================================
ボタン押下時に、コンソールを開いてエラーを確認すると、
「xmlhttp.send(strJSON);」の行に×マークが出ており、エラー内容は以下の通りでした。
「Failed to load resource: the server responded with a status of 400 (Bad Request)」
* * *
var strJSON = ‘{ “app”: masterAppId,“id”: recno, “record” : { “テーブル” : { “value” :’ + resp.records[0].テーブル.value + ‘}},“REQUEST\_TOKEN”:"’ + token + ‘" }’; // テーブル部分をリクエスト用JSONに組込み
* * *
上記部分の記載に問題があるのでしょうか。
誤りのある部分などご指摘いただければ幸いです。
---
### Author:  [@Legacy\_Account2115](https://community.cybozu.dev/u/Legacy_Account2115)
#### Post date: [2016 年 6 月 22 日午前 9:07 UTC](https://community.cybozu.dev/t/topic/2551/2 "2016-06-22T09:07:15Z")
y-shikiさん
おそらくappURLで定義されているリクエスト先が間違っていることが原因だとは思いますが、kintone.api.urlメソッドにtrueを渡した場合はどうなりますでしょうか？
---
### Author:  [@Legacy\_Account2111](https://community.cybozu.dev/u/Legacy_Account2111)
#### Post date: [2016 年 6 月 22 日午後 2:25 UTC](https://community.cybozu.dev/t/topic/2551/3 "2016-06-22T14:25:59Z")
瀧ヶ平 様
「xmlhttp.open(“PUT”, appURL, true);」に変更して実行した結果、
Failed to load resource: the server responded with a status of 400 (Bad Request)のエラーメッセージは変わりませんでしたが、
追加で以下のようなメッセージも表示されました。
{“message”:“認証に失敗しました。セッション認証には、「X-Requested-With」ヘッダーが必要です。”,“id”:“1505999166-2019403605”,“code”:“CB\_JH01”}
以下のナレッジを参考に、リクエスト方法で間違いがあるかさがしておりますが、見つけられていません。
■kintone REST API リクエスト
[https://cybozudev.zendesk.com/hc/ja/articles/202166310-kintone-REST-API-%E3%83%AA%E3%82%AF%E3%82%A8%E3%82%B9%E3%83%88](https://cybozudev.zendesk.com/hc/ja/articles/202166310-kintone-REST-API-%E3%83%AA%E3%82%AF%E3%82%A8%E3%82%B9%E3%83%88)
PUTの際は「var appURL = kintone.api.url(‘/k/v1/record’);」というリクエスト方法ではエラーとなるのでしょうか？
---
### Author:  [@Legacy\_Account2115](https://community.cybozu.dev/u/Legacy_Account2115)
#### Post date: [2016 年 6 月 22 日午後 2:33 UTC](https://community.cybozu.dev/t/topic/2551/4 "2016-06-22T14:33:21Z")
y-shikiさん
説明が足りずすいません、そうではなくappURL = kintone.api.url(“/k/v1record”) の部分を kintone.api.url(“/k/v1/record”, true) にするという意味です。
ゲストスペースのアプリの場合は、REST APIのリクエスト先が違うため、kintone.api.urlメソッドの第2引数にtrueを渡して得たurlにアクセスする必要があります
---
### Author:  [@Legacy\_Account2111](https://community.cybozu.dev/u/Legacy_Account2111)
#### Post date: [2016 年 6 月 22 日午後 2:38 UTC](https://community.cybozu.dev/t/topic/2551/5 "2016-06-22T14:38:51Z")
瀧ヶ平 様
理解が足らず申し訳ありません。
var appURL = kintone.api.url(‘/k/v1/records’, true);としたときのエラーは
var appURL = kintone.api.url(‘/k/v1/records’);と同じ内容のエラーとなりました。
今回のアプリはゲストスペースではありません。
もう少し、リクエストの方法を勉強したいと思います。
---
### Author:  [@Legacy\_Account2115](https://community.cybozu.dev/u/Legacy_Account2115)
#### Post date: [2016 年 6 月 22 日午後 2:50 UTC](https://community.cybozu.dev/t/topic/2551/6 "2016-06-22T14:50:32Z")
y-kishiさん
見る限りではおそらくXMLHttpRequestを利用する際にAPI認証をしていないことが原因かと思います。
kintone.APIメソッドを利用した形に書き直すか、こちら([https://cybozudev.zendesk.com/hc/ja/articles/201941754-REST-API%E3%81%AE%E5%85%B1%E9%80%9A%E4%BB%95%E6%A7%98)を参考に認証情報を設定すれば解決するかと](https://cybozudev.zendesk.com/hc/ja/articles/201941754-REST-API%E3%81%AE%E5%85%B1%E9%80%9A%E4%BB%95%E6%A7%98)%E3%82%92%E5%8F%82%E8%80%83%E3%81%AB%E8%AA%8D%E8%A8%BC%E6%83%85%E5%A0%B1%E3%82%92%E8%A8%AD%E5%AE%9A%E3%81%99%E3%82%8C%E3%81%B0%E8%A7%A3%E6%B1%BA%E3%81%99%E3%82%8B%E3%81%8B%E3%81%A8)
---
### Author:  [@Legacy\_Account2111](https://community.cybozu.dev/u/Legacy_Account2111)
#### Post date: [2016 年 6 月 23 日午前 1:25 UTC](https://community.cybozu.dev/t/topic/2551/7 "2016-06-23T01:25:13Z")
リクエストヘッダーに「xmlhttp.setRequestHeader(‘X-Cybozu-Authorization’,‘\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*’);」と
認証情報を追記しましたが、エラー内容が変わりませんでしたので、
kintone API で Promiseを使用してみました。
以下ようにコードを書いたのですが、サブテーブルに行が追加されませんでした。
=============================================================
//レコード一覧画面でのイベント※「recno」は予め取得済み
//ボタン押下時のイベント
bthozon.onclick = function () {
var masterAppId = 123;
var query = ‘レコード番号="’ + recno + ‘"’;
return new kintone.Promise(function(resolve, reject) {
var params = {app: masterAppId, query: query};
kintone.api(‘/k/v1/records’, ‘GET’, params, function(resp) {
resolve(resp);
});
}).then(function(resp) {
//レコードがあった場合の処理
if (resp.records.length) {
var insertedRow = { // テーブルへの追加行
“value” : {
“recallday” : {
“type”: “DATE”,
“value” : “テストです”
},
“時刻” : {
“type”: “TIME”,
“value” : “テストです”
},
“person” : {
“type”: “DROP\_DOWN”,
“value” : “テストです”
},
“受け入れ” : {
“type”: “SINGLE\_LINE\_TEXT”,
“value” : “テストです”
},
“callresult” : {
“type”: “MULTI\_LINE\_TEXT”,
“value” : “テストです”
}
}
};
resp.records[0].サブテーブル.value.push(insertedRow);
//レコードがなかった場合の処理
} else if (!resp.records.length) {
window.alert(“アタックリストにレコードはありませんでした”);
}
//レスポンス終了の記載
}).then(function(resp) {
return event;
});
} //ボタンのクリックイベント終了
=============================================================
XMLHttpRequestに代わる方法としてpromisを使用してみたのですが、
「resp.records[0].サブテーブル.value.push(insertedRow);」といった指定はできないのでしょうか？
---
### Author:  [@Legacy\_Account2115](https://community.cybozu.dev/u/Legacy_Account2115)
#### Post date: [2016 年 6 月 23 日午前 5:09 UTC](https://community.cybozu.dev/t/topic/2551/8 "2016-06-23T05:09:58Z")
y-kishiさん
記載されているPromiseでのコードを見る限り、レコード更新のPUTリクエストが記述されていないため、レコード更新が行われていないのだと思います。
なので、
```
kintone.api(kintone.api.url("/k/v1/records"), "GET", params).then(function(resp) {
// respからレコードを取得、編集し更新用のレコードオブジェクトを record として定義する
return kintone.api(kintone.api.url("/k/v1/record"), "PUT", {app: appId, id: recordId, record: record});
}).then(function(res) {
// 更新後の処理
});
```
のようにする必要があります
---
### Author:  [@Legacy\_Account2111](https://community.cybozu.dev/u/Legacy_Account2111)
#### Post date: [2016 年 6 月 23 日午前 7:09 UTC](https://community.cybozu.dev/t/topic/2551/9 "2016-06-23T07:09:33Z")
瀧ヶ平 様
ご回答ありがとうございます。
// respからレコードを取得、編集し更新用のレコードオブジェクトを record として定義する
理想としては、ボタンの押下イベントで対象レコードのサブテーブルに行を1行だけ追加したかったのですが、
PUTするためにはサブテーブルの全行を取得し、その情報の最後尾に追加する行の情報を追加するという動作が必要なのですね。
対象レコードによってサブテーブルの行数がまちまちなので、for文で配列の結合する方法などを考えてみます。
---
### Author:  [@Legacy\_Account2111](https://community.cybozu.dev/u/Legacy_Account2111)
#### Post date: [2016 年 6 月 23 日午後 3:56 UTC](https://community.cybozu.dev/t/topic/2551/10 "2016-06-23T15:56:42Z")
お世話になっております。
[https://cybozudev.zendesk.com/hc/ja/community/posts/204397936-%E3%83%86%E3%83%BC%E3%83%96%E3%83%AB%E3%81%AE%E8%BF%BD%E5%8A%A0](https://cybozudev.zendesk.com/hc/ja/community/posts/204397936-%E3%83%86%E3%83%BC%E3%83%96%E3%83%AB%E3%81%AE%E8%BF%BD%E5%8A%A0)
上記URLを参照しコードを書いたところ、無事サブテーブルに行が追加されました。
ただ、このコードではサブテーブルの末尾に行が追加されてしまいます。
希望としては、先頭の行に追加したいのですが、以下コードのどの部分を変更すればそのような動きになりますでしょうか。
「//subtable = subtable.unshift(appended\_subtable); // 既存と追加分のサブテーブルを結合」を試してみたのですが
先頭の行には追加されませんでした。
ご教示いただければ幸いです。
==============================================================
//var existing\_subtable = record[“\<サブテーブル\>”].value; // 既存のサブテーブル
var existing\_subtable = resp.records[0].\<サブテーブル\>.value; // 既存のサブテーブル
var subtable = []; // 最終的にPUTするサブテーブル
var appended\_subtable = []; // 追加したいサブテーブル
// 既存のサブテーブルを抽出
for (var i = 0; i \< existing\_subtable.length; i++) {
subtable.push(existing\_subtable[i]);
}
appended\_subtable = {
“value” : {
“tb1” : {
“type”: “DATE”,
“value” : app10
},
“tb2” : {
“type”: “TIME”,
“value” : app11
},
“tb3” : {
“type”: “DROP\_DOWN”,
“value” : app13
},
“tb4” : {
“type”: “SINGLE\_LINE\_TEXT”,
“value” : app6
},
“tb5” : {
“type”: “MULTI\_LINE\_TEXT”,
“value” : app7
}
}
};
subtable = subtable.concat(appended\_subtable); // 既存と追加分のサブテーブルを結合
//subtable = subtable.unshift(appended\_subtable); // 既存と追加分のサブテーブルを結合
var put\_record = {}; // レコード更新用オブジェクト
put\_record[“\<サブテーブル\>”] = {
value: subtable
};
// 更新処理
kintone.api(kintone.api.url(‘/k/v1/record’, true), ‘PUT’, {
app: masterAppId,
id: respId,
record: put\_record
});
==============================================================
---
### Author:  [@Legacy\_Account2115](https://community.cybozu.dev/u/Legacy_Account2115)
#### Post date: [2016 年 6 月 23 日午後 4:00 UTC](https://community.cybozu.dev/t/topic/2551/11 "2016-06-23T16:00:47Z")
y-kishiさん
先頭に追加したいのであれば
subtable = [].concat(appended\_subtable, subtable);
とすれば可能です
---
### Author:  [@Legacy\_Account2111](https://community.cybozu.dev/u/Legacy_Account2111)
#### Post date: [2016 年 6 月 24 日午前 12:49 UTC](https://community.cybozu.dev/t/topic/2551/12 "2016-06-24T00:49:04Z")
瀧ヶ平 様
「subtable = [].concat(appended\_subtable, subtable);」と変更したところ、
サブテーブルの先頭に行が追加され、希望する機能を実装することができました。
遅い時間にも関わらずご対応いただきありがとうございました。
---
### Author:  [@system](https://community.cybozu.dev/u/system)
#### Post date: [2025 年 5 月 29 日午前 2:57 UTC](https://community.cybozu.dev/t/topic/2551/13 "2025-05-29T02:57:17Z")
このトピックはベストアンサーに選ばれた返信から 3 日が経過したので自動的にクローズされました。新たに返信することはできません。