アプリ間でJOINした際にエラーが発生する「Uncaught (in promise) TypeError: Cannot read properties of null (reading 'ownerDocument')」

お世話になっております。

Kintoneの2アプリ間でJOINした結果を一覧画面に表示したいのですが、

次のエラーで正常に動いてくれません。

 

コードは下記の通りです。 参考:https://qiita.com/rex0220/items/4d0c757344e8ac144f8d

いろいろと調べましたが原因が分からず行き詰っております。

初心者の為基本的な部分で間違っているかもしれませんが、どなたかご教示いただけますと幸いです。

(function() {
    "use strict";

    // 一覧表示
    kintone.events.on("app.record.index.show", function(event) {
        if (event.viewId !== 5522091) return event;

        var obj = {};
        var custApp = 45;

        // 経費情報取得
        fetchRecords(custApp, '', ['契約No2']).then(function(records) {
            obj.rs1 = convertToRows(records);
            console.log('rs1', JSON.stringify(obj.rs1));

            // 契約情報取得
            return fetchRecords(event.appId, '', ['ID', '物件名','契約No']);

        }).then(function(records) {
            obj.rs2 = convertToRows(records);
            console.log('rs2', JSON.stringify(obj.rs2));

            // 経費情報と契約情報をjoin
            var result1 = 
                alasql(
                "SELECT orders.[ID], orders.[物件名], orders.[契約No] \
                FROM ? AS cust JOIN ? AS orders ON cust.[契約No2] = orders.[契約No]", [obj.rs1, obj.rs2]);

            console.log('result3', JSON.stringify(result1));

            // grid 表示
            var grid = document.getElementById('xp-grid');
            new Handsontable(grid, { 
                data: result1, 
                colWidths: [150, 100, 200],
                colHeaders: ['ID', '物件名','契約No'], 
                columns: [
                    { data: 'ID' },
                    { data: '物件名' },
                    { data: '契約No' },
                ],
                readOnly: true 
            });

        });

        return event;
    });


    // get records
    function fetchRecords(appId, opt_query, opt_fields, opt_offset, opt_limit, opt_records) {
        var query = opt_query || '';
        var offset = opt_offset || 0;
        var limit = opt_limit || 500;
        var allRecords = opt_records || [];
        var params = {app: appId, query: query + ' limit ' + limit + ' offset ' + offset };
        if (opt_fields) params.fields = opt_fields;
        return kintone.api(kintone.api.url('/k/v1/records', true), 'GET', params).then(function(resp) {
            allRecords = allRecords.concat(resp.records);
            if (resp.records.length === limit) {
                return fetchRecords(appId, query, opt_fields, offset + limit, limit, allRecords);
            }
            return allRecords;
        });
    }

    // records convert to table rows 
    function convertToRows(records) {
        var rows = records.map(function(record){
            var keys = Object.keys(record);
            var row = {};
            keys.map(function(key){
                row[key] = record[key].type === 'NUMBER' ? Number(record[key].value) : record[key].value;
            });
            return row;
        });
        return rows;
    }

})();

nakanoさん

こんにちは。

 

ブラウザのデベロッパーツールでデバッグいただき

記載のコードのどの行でエラー発生するか分かれば、原因をもう少し掘り下げられるかもしれません。

恐らくは、alasqlかhandsontableのどちらかのライブラリに渡すところでエラーになっているものと思います。

 

私の環境では以下ライブラリを当てて動きました。

alasql.min.js(記載いただいたリンク先からダウンロードしたもの)

https://js.cybozu.com/handsontable/6.2.2/handsontable.full.min.js
https://js.cybozu.com/handsontable/6.2.2/handsontable.full.min.css

※handsontableはCybozuCDNより

koichi様

 

ご連絡ありがとうございます。解決しました。

vargrid =document.getElementById('xp-grid');

大変初歩的なミスで、一覧画面のテーブル名とjs内のテーブル名がちぐはぐになっていたこと、

handsontableの最新版を入れていたことが原因でした。

テーブル名を修正し、handsontable6.2.2を入れたところ、正常に動作しました。

 

ご回答重ねて感謝いたします。

またこちらにご相談させていただくこともあると思いますので、どうぞ宜しくお願い致します。

 

このトピックはベストアンサーに選ばれた返信から 3 日が経過したので自動的にクローズされました。新たに返信することはできません。