Criar tabela com multiobjetos do JSON no JS

Front-end
, , , ,
#1

Olá, eu estou tentando criar uma tabela no JS, por meio de um array multiobjetos em JSON, mas não consigo fazer com que ela apareça na tela. Fui pesquisando uma maneira de implementar o JSON em uma tabela, porém está apresentando erro, quando é chamada a propriedade innerHTML (penúltima linha do código JS).

Sei que está dando erro, porque o innerHTML está acessando um campo que está nulo, mas não estou conseguindo ver alguma saída.

Seguem abaixo os códigos em HTML e JS:

HTML

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <title>Escola</title>
    <script src="js/turmas.js"></script>
</head>
<body >
<main>
    <section>
        <form class="form">

            <h2>Dados do aluno</h2>

            <label for="nome">Nome:</label>
            <input type="text" id="nome" />

            <label for="turma">Turma:</label>
            <input type="text" id="turma" />

            <label for="serie">Série:</label>
            <select id="serie">
                <option value="1">1º ano - ensino médio</option>
                <option value="2">2º ano - ensino médio</option>
                <option value="3">3º ano - ensino médio</option>
            </select>

            <label for="turno">Turno:</label>
            <select id="turno">
                <option value="m">Matutino</option>
                <option value="v">Vespertino</option>
                <option value="n">Noturno</option>
            </select>

            <input type="button" id="botao" value="botao"/>

        </form>
    </section>

    <div id="tabelaAlunos">

    </div>

</main>
</body>
</html>

JS + JSON


var turmas = [
    {
        turma: 'A',
        alunos:[
            {
                nome: 'José',
                serie: '1º ano - ensino médio',
                faltas: 20,
                turno:[{
                    nome: 'noturno',
                }]
            },
            {
                nome: 'Hugo',
                serie: '1º ano - ensino médio',
                faltas: 32,
                turno: [{
                    nome: 'matutino',
                }]
            },
        ],
    },
    {
        turma: 'B',
        alunos: [
            {
                nome: 'Mariana',
                serie: '2º ano - ensino médio',
                faltas: 13,
                turno: [{
                    nome: 'verspetino',
                }]
            },
            {
                nome: 'Paulo',
                serie: '3º ano - ensino médio',
                faltas: 5,
                turno: [{
                    nome: 'matutino',
                }],
            },
        ],
    },
];


var col = [];

for (var i = 0; i < turmas.length; i++) {
    for (var key in turmas[i]) {
        if (col.indexOf(key) === -1) {
            col.push(key);
        }
    }
}

//Criar table
var table = document.createElement("table");

//Criar  table rows
var tr = table.insertRow();

//Criar table headers
for (var i = 0; i < col.length; i++) {
    var th = document.createElement("th");    // TABLE HEADER.
    th.innerHTML = col[i];
    tr.appendChild(th);
}

//Adicionar  JSON nas tr
for (var i = 0; i < turmas.length; i++) {
    tr = table.insertRow();

    for (var j = 0; j < col.length; j++) {
        var tabCell = tr.insertCell();
        if (j !== 4) {
            tabCell.appendChild(document.createTextNode(turmas[i][col[j]]));
        } else {
            for (var x = 0; x < turmas[i].alunos.length; x++) {
                var nome = turmas[i].alunos[x].nome,
                    serie = turmas[i].alunos[x].serie,
                    faltas = turmas[i].alunos[x].faltas,
                    turno = turmas[i].alunos[x].turno;

                tabCell.appendChild(document.createTextNode(" " + nome + " " + serie + ", " + faltas + ", " + turno));
            }
        }
    }
}

var divContainer = document.getElementById('tabelaAlunos');
divContainer.innerHTML = "";
divContainer.appendChild(table);
#2

Atualizando: mudei a posição do script para o final da tag body e está imprimindo o cabeçalho, mas somente o que está contido em turmas (turma e alunos). Os atributos do objeto alunos não foram inseridos no cabeçalho (nome, série, faltas e turno).