初めての投稿です。JavaScriptを含むプログラミング初心者で、思いつく限り調べてみたのですがうまくいきません。ご助力くださると幸いです。
一覧画面に検索ボックスを設置して、検索ボックスに入力した文字をもとに一覧レコード全体のあいまい検索を行いたいです。
その検索はAlasqlを使用したいのですが、そもそも一覧画面を表示した際にalertで下記エラーが出ます。Alasqlで[住所]を取得できていないからかと思ったのですが、そもそもフォームで[住所]というフィールドに表示するデータは、[都道府県] + [市町村] + [丁目]となっているため、そのような設定をしないといけないということでしょうか？
DataTables warning: table id=myTable - Requested unknown parameter '住所' for row 0, column 2. For more information about this error, please see[http://datatables.net/tn/4](http://datatables.net/tn/4)
検索ボックスに文字を入力して検索ボタンを押すと、ブラウザの開発者ツールのコンソールに以下のエラーが出ます。
こちらはなぜそのエラーが出るかわからず、またどのように調べればいいかが模索できておりません。
Uncaught TypeError: t is not a function
at w.Query.cb (download.do?app=13&contentId=708&jsType=DESKTOP&hash=95ce344f88ddb4b34a54d796d761ec885f28c2b1:10:18371)
at c (download.do?app=13&contentId=708&jsType=DESKTOP&hash=95ce344f88ddb4b34a54d796d761ec885f28c2b1:2:11064)
at u (download.do?app=13&contentId=708&jsType=DESKTOP&hash=95ce344f88ddb4b34a54d796d761ec885f28c2b1:2:7522)
at Object.eval [as datafn] (eval at <anonymous> (download.do?app=13&contentId=708&jsType=DESKTOP&hash=95ce344f88ddb4b34a54d796d761ec885f28c2b1:10:21665), <anonymous>:3:57)
at download.do?app=13&contentId=708&jsType=DESKTOP&hash=95ce344f88ddb4b34a54d796d761ec885f28c2b1:2:7053
at Array.forEach (<anonymous>)
at o (download.do?app=13&contentId=708&jsType=DESKTOP&hash=95ce344f88ddb4b34a54d796d761ec885f28c2b1:2:7013)
at a (download.do?app=13&contentId=708&jsType=DESKTOP&hash=95ce344f88ddb4b34a54d796d761ec885f28c2b1:10:18215)
at w.dexec (download.do?app=13&contentId=708&jsType=DESKTOP&hash=95ce344f88ddb4b34a54d796d761ec885f28c2b1:9:26377)
at w.exec (download.do?app=13&contentId=708&jsType=DESKTOP&hash=95ce344f88ddb4b34a54d796d761ec885f28c2b1:9:25814)
ソースは以下となります。
(function() {
"use strict";
kintone.events.on(['app.record.index.show'], function(event){
if(event.viewName !== '住所管理') return;
// Initialize kintone-rest-api-client
const client = new KintoneRestAPIClient();
var myTable;
var appId = kintone.app.getId();
console.log(appId);
// APIでデータ取得
client.record.getAllRecordsWithCursor({
app: appId,
}).then(function(response){
console.log(response);
// kintoneのrecords(json)を、alasqlで扱える配列に変換
function convertToRows(records) {
var rows = records.map(function(record){
var keys = Object.keys(record);
var row = {};
keys.map(function(key){
switch (key) {
row[key] = record[key].type === 'NUMBER' ? Number(record[key].value) : record[key].value;
}
});
return row;
});
return rows;
}
var recordSet = convertToRows(response);
//検索ワードを格納
var searchWord = document.createElement('input');
searchWord.type = 'text';
//検索ボタンの設定
var searchButton = document.createElement('input');
searchButton.type = 'submit';
searchButton.value = '検索';
var sqlResult = alasql(
"SELECT [物件名], [物件コード], [住所] FROM ? GROUP BY [物件名], [物件コード]",
[recordSet]
);
console.log(sqlResult)
searchButton.onclick = function(){
sqlResult = keyWordSearch();
};
function keyWordSearch(){
var sql = ""
if(searchWord = ""){
sql = alasql(
"SELECT [物件名], [物件コード], [[住所] FROM ? GROUP BY [物件名], [物件コード]",
[recordSet]
);
console.log(sql);
}else{
// select by alasql
sql = alasql(
"SELECT [物件名], [物件コード], [住所] FROM ? WHERE [物件名] LIKE '% ? %' GROUP BY [物件名], [物件コード]",
[recordSet],[searchWord]
);
console.log(sql);
}
return sql;
}
// 表に表示するカラム（alasqlの出力結果の項目名）
var columns = [
'物件コード',
'物件名',
'住所'
];
// DataTables初期化
myTable = $('#myTable').DataTable({
destroy: true,
pageLength: 100,
lengthChange: false,
searching: false,
info: false,
data: sqlResult.map(function(record){
return columns.reduce(function(data, column){
data[column] = record[column];
return data;
}, {
レコード番号: record['レコード番号']
});
}),
columns: columns.map(function(column){
return {
title: column,
data: column
}
})
});
//要素をクリア
var space = kintone.app.getHeaderMenuSpaceElement()
for(var i = space.childNodes.length - 1; i >= 0; i++){
space.removeChild(space.childNodes[i]);
}
var label = document.createElement('label');
label.appendChild(document.createTextNode('レコード内検索'));
label.appendChild(document.createTextNode(' '));
label.appendChild(searchWord);
label.appendChild(document.createTextNode(' '));
label.appendChild(searchButton);
kintone.app.getHeaderMenuSpaceElement().appendChild(label);
});
});
})();
参考として、下記URLを参照して、うまく組み合わせられないかと考えて書きました。
https://qiita.com/rex0220/items/4d0c757344e8ac144f8d
https://dsp74118.blogspot.com/2020/05/kintonesql.html
https://qiita.com/sy250f/items/b17f6cbbeb2b862c48a9
https://crud-lab.hatenablog.com/entry/2016/03/17/9000#f-8c1c6c1f
プラグインを使用せず、プログラミングの勉強を兼ねて自分でJavaScriptを作成したいと思っております。
またAlasqlの可能性を探るため、なんとかAlasqlを使用したいと考えております。
大変お手数をおかけするのですが、どうかご指導いただけますと幸いです。