学生向けプログラミング入門 | 無料

学生向けにプログラミングを無料で解説。Java、C++、Ruby、PHP、データベース、Ruby on Rails, Python, Django

Javascript | エラー | Uncaught TypeError: Cannot read properties of null (reading 'map')

↓↓クリックして頂けると励みになります。



Full Calendar(フルカレンダー)を実装していると、「Uncaught TypeError: Cannot read properties of null (reading 'map')」というJavascriptのエラーに遭遇しました。

Uncaught TypeError
Uncaught TypeError


Uncaught TypeError: Cannot read properties of null (reading 'map')
    at showOrders (host_calendar:125:23)
    at HTMLDocument.<anonymous> (host_calendar:162:17)



これは、「配列をmapに渡す時に、パラメーターがありません」という意味のエラーとなります。
エラーの切り分けのため、配列が空の状態でもJavascriptが動くようにしたい場合、配列名の後ろに「?」をつけるとJavascriptが動きます。
今回の例では、以下のような記述にしました。
2行目の部分がmapの記述になります。

    function showOrders(orders) {
        return orders?.map(function(o) {
            let code = '#ffdd57';
            if (new Date(o.due_date) < new Date()) {
                code = '#ff3860';
            } else if (new Date(o.due_date) > new Date(new Date().getTime() + (2*24*60*60*1000))) {
                code = '#23d160';
            }
            return {
                id: o.id,
                title: o.buyer_name,
                start: o.due_date,
                end: o.due_date,
                backgroundColor: code,
                color: code
            }
        });
    };



ただこれでJavascriptが動作したとしても、配列が空であることに間違いありません。
配列が空の状態でもエラーが出ないようにしたい場合は、これが解決策になると思います。


↓↓クリックして頂けると励みになります。