Create object with internal object array

Question

I would like to create an object "mold" (maybe a class, maybe a function), with possibly other objects inside it, and arrays. The structure I imagine is like this:

postagem: {
    titulo: "",
    autor: "",
    texto: [
        {
            linha: [{
                caractere: '', // isso deveria ser um objeto
                data: string, // objeto date?
            }],
            desfazer: ?, // objetos caractere/data
        }
    ],
}

Explaining:

posting must contain: title, author and text;

text shall contain an indefinite amount of: line and undo;

line shall contain an indefinite amount of: date and character;

---

Is this crazy construction possible? How I would use that object?

The idea was to be able to transfer the instantiated objects this way from here to there using JSON.

Answer 1

I believe it would look something like this, you can go adding new objects in the array’s through the method push();

var caractere = {
  nome: 'Daniel'
};
var data = new Date();
var linha = {
  caractere: [caractere],
  data: [data]
}
var desfazer = {
  caractere: [caractere],
  data: [data]
}

var postagem = {
  titulo: 'StackOverFlow',
  autor: 'Mathias',
  texto: [linha, desfazer]
};

//O mais próximo que consegui da maneira presente na pergunta:
/*var postagem = {
  titulo: "",
  autor: "",
  texto: {
    linha: {
      caractere: [],
      data: []
    },
    desfazer: {
      caractere: [],
      data: []
    }
  }
}*/

console.log(postagem.titulo);
console.log(postagem.autor);
console.log(postagem.texto[0].caractere[0].nome);
console.log(postagem.texto[0].data[0]);

Answer 2

You can choose objects or classes, it depends a little if you want something passive or active. That is, if you only want to group data, an object serves well; if you want each object to be able to do calculations, modify itself or have methods then class is better.

For objects you can make a function "Factory" (generator/factory) like this:

function objFactory(title, author) {
  return {
    titulo: title || '',
    autor: author || '',
    texto: [{
      linha: [{
        caractere: '',
        data: null,
      }],
      desfazer: null,
    }],
  }
}

var excerto = objFactory('Lusiadas', 'Camões');
console.log(JSON.stringify(excerto));

Using classes:

class Excerto {
  constructor(title, author) {
    this.titulo = title || '';
    this.autor = author || '';
    this.texto = [{
      linha: [{
        caractere: '',
        data: null,
      }],
      desfazer: null,
    }];
  }
}

var excerto = new Excerto('Lusiadas', 'Camões');
console.log(excerto.titulo);

If you want to develop more you can do something like this:

function objFactory(title, author) {
  return {
    titulo: title || '',
    autor: author || '',
    texto: [],
  }
}

var autor = document.querySelector('input[name="autor"]');
var titulo = document.querySelector('input[name="titulo"]');
var iniciar = document.querySelector('button');

function verificarAutoria() {
  iniciar.disabled = !autor.value.trim() || !titulo.value.trim();
}

autor.addEventListener('input', verificarAutoria);
titulo.addEventListener('input', verificarAutoria);
iniciar.addEventListener('click', function() {
  var textarea = document.createElement('textarea');
  document.body.appendChild(textarea);
  var obj = objFactory(titulo.value, autor.value);
  var linha = [];
  obj.texto.push({
    linha: linha,
    desfazer: null,
  });
  textarea.addEventListener('keyup', function(e) {
    if (e.keyCode == 13) { // Enter, mudar a linha
      linha = [];
      obj.texto.push({
        linha: linha,
        desfazer: null,
      });
    } else {
      var caractere = String.fromCharCode(e.keyCode);
      linha.push({
        caractere: caractere,
        data: new Date(),
      });
    }
    console.log(JSON.stringify(obj))
  });
});

<input type="text" name="autor" />
<input type="text" name="titulo">
<button type="button" disabled>Iniciar</button>

jsFiddle: https://jsfiddle.net/rpohrz8q/