index.html

<!DOCTYPE html> 
<html lang="ja">
    <head>
        <meta charset="utf-8"/>
        <link href="https://unpkg.com/gridjs/dist/theme/mermaid.min.css" rel="stylesheet" />
        <script src="https://unpkg.com/gridjs/dist/gridjs.development.js"></script>

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
        <script src="./main.js"></script>
    </head>

    <body>
        <h1>1-2 後期時間割</h1>
        <div id="result"></div>
        <script>
            const transpose = a => a[0].map((_, c) => a.map(r => r[c]));

            let jsondata;
            $.ajaxSetup({ async: false }); // Ajax通信を同期通信にする
            $.getJSON('timetable-2020-1-2.json', data => {
                jsondata = data;
            })
            $.ajaxSetup({ async: true }); // Ajax通信を非同期通信に戻す
            columns = [];
            let beforetransdata = [[1, 2, 3, 4, 5, 6, 7, 8]];
            for(let DayofTheDay in jsondata['timetable']) {
                columns.push(DayofTheDay);
                beforetransdata.push(jsondata['timetable'][DayofTheDay])
            }
            
            let data = transpose(beforetransdata);
            columns.unshift('限目');
            new gridjs.Grid({
                columns: columns,
                data: data,
                width: '77%',
                autoWidth: false
                
            }).render(document.getElementById('result'));

        </script>
        
    </body>
</html>