Adicionar novos elementos do form na tabela e no LocalStorage

Front-end
, ,
#1

Não consigo adicionar novos elementos criados no form na tabela nem para serem exibidos adequadamente no LocalStorage.

Até o momento, eu só consegui iterar os objetos do json (que estão no JS) na tabela e no LocalStorage, mas, quando tento criar um novo elemento diretamente na webpage, ele não adiciona na tabela ou é só incorporado ao LocalStorage, porém explicitado como [Object object] no lado da key. Segue o código abaixo:

HTML

<!DOCTYPE html>
<html lang="pt-br">
  <head>
    <meta charset="UTF-8" />
    <title>Escola</title>
  </head>
  <body>
    <main>
      <section>
        <form id="form">
          <h2>Dados do aluno</h2>

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

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


          <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="faltas">Faltas:</label>
          <input type="text" id="faltas" />

          <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-cadastro" value="cadastrar" />
        </form>
      </section>

      <section>
        <table id="tabela-colegio">
          <thead>
            <tr>
              <th>Turma</th>
              <th>Aluno</th>
              <th>Série</th>
              <th>Faltas</th>
              <th>Turno</th>
            </tr>
          </thead>
          <tbody>

          </tbody>
        </table>
      </section>
    </main>
    <script src="js/colegio.js"></script>
  </body>
</html>

JS

let turmas = [
  {
    nome: "A",
    alunos: [
      {
        nome: "José",
        serie: "1º ano - ensino médio",
        faltas: 20,
        turno: {
          periodo: "noturno"
        }
      },
      {
        nome: "Hugo",
        serie: "1º ano - ensino médio",
        faltas: 32,
        turno: {
          periodo: "matutino"
        }
      }
    ]
  },

  {
    nome: "B",
    alunos: [
      {
        nome: "Mariana",
        serie: "2º ano - ensino médio",
        faltas: 13,
        turno: {
          periodo: "verspetino"
        }
      },
      {
        nome: "Paulo",
        serie: "3º ano - ensino médio",
        faltas: 5,
        turno: {
          periodo: "matutino"
        }
      }
    ]
  }
];

console.log(turmas);

function novaTr(tbody, arrayValores) {
  const novaTr = tbody.insertRow();
  novaTr.classList.add('aluno-turma');

  arrayValores.forEach(function(v, i) {
    const novaTd = novaTr.insertCell(i);

    let novoTexto = document.createTextNode(v);
    if (typeof v == "object") {
      novoTexto = v;
    }
    novaTd.appendChild(novoTexto);
  });
}

function criaTabela() {
  let tbodyColegio = document
    .getElementById("tabela-colegio")
    .getElementsByTagName("tbody")[0];

  for (let turma of turmas) {
    for (let aluno of turma.alunos) {
      let turno = "";

      if (aluno.turno !== undefined) {
        turno = aluno.turno.periodo;
      }

      novaTr(tbodyColegio, [
        turma.nome,
        aluno.nome,
        aluno.serie,
        aluno.faltas,
        aluno.turno.periodo,
        criaBotaoDeEditarTr(),
        criaBotaoDeApagarTr()
      ]);
    }
  }
  return tbodyColegio;
}

console.log(criaTabela());

function criaBotaoDeApagarTr() {
  const botaoApagar = document.createElement("button");
  botaoApagar.classList.add("botao-apagar");
  botaoApagar.innerHTML = "excluir";

  return botaoApagar;
}

function criaBotaoDeEditarTr() {
  const botaoEditar = document.createElement("button");
  botaoEditar.classList.add("botao-editar");
  botaoEditar.innerHTML = "editar";

  return botaoEditar;
}

function getInformacoes() {
  if (localStorage.getItem("turmas") == null) {
    localStorage.setItem("turmas", JSON.stringify(
        [
          {
            nome: "A",
            alunos: [
              {
                nome: "José",
                serie: "1º ano - ensino médio",
                faltas: 20,
                turno: {
                  periodo: "noturno"
                }
              },
              {
                nome: "Hugo",
                serie: "1º ano - ensino médio",
                faltas: 32,
                turno: {
                  periodo: "matutino"
                }
              }
            ]
          },

          {
            nome: "B",
            alunos: [
              {
                nome: "Mariana",
                serie: "2º ano - ensino médio",
                faltas: 13,
                turno: {
                  periodo: "verspetino"
                }
              },
              {
                nome: "Paulo",
                serie: "3º ano - ensino médio",
                faltas: 5,
                turno: {
                  periodo: "matutino"
                }
              }
            ]
          }
        ]
    ));
  }

  return JSON.parse(localStorage.getItem("turmas"));
}

function setInformacoes(turmas) {
  localStorage.setItem(turmas, JSON.stringify(turmas));
}

console.log(getInformacoes());

document.getElementById("botao-cadastro").addEventListener("click", function() {

  let form = document.getElementById("form");

  let informacoesForm = new FormData(form);

  let novaInfo = Object.fromEntries(informacoesForm);

  let informacoes = getInformacoes();

  informacoes.push(novaInfo);

  setInformacoes(informacoes);

  pushData();
});

///////// TENTATIVA 1 //////////////////

let turma;
let aluno;
let serie;
let faltas;
let turno;

function getTaskInput() {
  try {
    turma = document.querySelector('#value').value;
    aluno = document.querySelector('#aluno').value;
    serie = document.querySelector('#serie').value;
    faltas = document.querySelector('#faltas').value;
    turno = document.querySelector('#turno').value;
    console.log("Succesfully retrieved data. " +
        "Turma: " + turma +
        ". Aluno: " + aluno +
        ". Série: " + serie +
        ". Faltas: " + faltas +
        ". Turno: " + turno);
  } catch(e) {
    console.log("Failed to retrieve data, unexpecter error.");
  }
}

let taskObject;
function taskToObject() {
  taskObject = {
    turma: turma,
    aluno: aluno,
    serie: serie,
    faltas: faltas,
    turno: turno
  }
}

let taskArray;
function getTaskArray() {
  let taskArrayString = localStorage.getItem("turmas");
  if (taskArrayString !== null && typeof taskArrayString === "string") {
    taskArray = JSON.parse(taskArrayString); // <------
    console.log("Succesfully retrieved 'tasks' and contents.");
  } else {
    console.log("Succesfully retrieved 'tasks', contents were not a string or held no contents. Contents of 'tasks' reset to empty array");
    let emptyArray = JSON.stringify([]);
    localStorage.setItem("turmas", emptyArray);
    taskArray = localStorage.getItem("turmas");
    taskArray = JSON.parse(taskArray); // <------
  }
}

let taskString;

function pushData() {
  taskString = JSON.stringify(taskObject);
  taskArray.push(taskString); // <----- !No need to assign there.
}

A parte do JS que tem as funções getTaskInput(), taskToObject() e getTaskArray() foi um código que tirei para implementar o dados criados no form para o LocalStorage, mas só aparece no seguinte formato:

key

[object Object],[object Object],[object Object]

value
2: {} (só aparece um array vazio)

Edit 1: essas funções que eu mencionei acima não foram inicializadas e não sei nem mais onde colocá-las para ver se o código funciona.

Edit 2: consertei o id turma que se encontra dentro da function getTaskInput e coloquei todas as functions mencionadas dentro do eventListener de ‘botao-cadastro’ e só está imprimindo no console as mensagens do bloco tryCatch da função getTaskInput.

#2