Peut-on stocker des objets dans des objets?

1/ idée générale
je désire réaliser des objets "Leçons" qui contiennent différents champs :
une chaine "classe, une chaine "matière, une chaine "titre", un objet tableau "tb" et une chaine "vignette".
Les éléments dans le tableau sont des "Docu", suite de documents qui sont des éléments partiels d'une leçon.

Le code est :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
//-------------- un document, morceau de leçon  ------------------
      export let Docu = class Docu {
         constructor (nom, lien) {
            this.nom = nom;
            this.lien = lien;
         }
      }

Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
/ ------------  une lecon, peut contenir plusieurs documents  ------------------
      export let Lecon = class Lecon {
         constructor (classe, matière, titre, tb, vignette) {
            this.classe = classe;
            this.matière = matière;
            this.titre = titre;
            this.tb = tb;
            this.vignette = vignette; 
         }
      }
      //=======================================================================
J'ai réalisé une structure de leçon pour faire des tests.
Cela ressemble à ça :

Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
  // leçons de 2NTE techno
 
      var classe = "2NTE";
      var matière = "TECHNOLOGIE";
 
      export let tb_docu = [];
      tb_docu[0] = new Docu ("fiche élève", "2nte/techno/symboles.pdf");
      tb_docu[1] = new Docu ("Fiche du prof", "2nte/techno/symboles.pdf");
      tb_docu[2] = new Docu ("correction", "2nte/techno/symboles.pdf");
 
      export let table_0 = [];
      table_0[0] = new Lecon (`${classe}`, `${matière}`, "Les Symboles de Base",  `${tb_docu}` , "2nte/techno/vignette_lc0symb.png");


2/ la mise en oeuvre
pendant les tests, tout fonctionne bien pour les champs simples : (exemple avec le champ "matière")
(l'élément res.table[monBloc] représente la table "table_0" et monIndex est à zéro pour le test)
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
 document1.textContent = `${res.table_source[monBloc][monIndex].matière}`;
                                console.log(" table : " + monBloc + " index : " + monIndex + "  matière : " +  res.table_source[monBloc][monIndex].matière);
3/ la problématique
je ne parviens pas à accéder correctement à mon champ composé, c'est à dire, le champ "tb", qui est lui-même un objet composé de deux champs.
J'ai tenté plusieurs syntaxe, qui me paraissaient logiques, comme :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
document1.textContent = `${res.table_source[monBloc][monIndex].tb[0].nom}`;
Cela ne fonctionne pas et m'indique de l'élément est indéfini.


Questions :

Q1 : le principe d'avoir dans un objet, un propriété qui est elle même un objet est-il correct?
Si oui, comment accéder aux champs de cet objet secondaire, qui est lui même un composante de l'objet principal?

Q2 : si dans le principe cela ne peut pas fonctionner, comment puis-je procéder pour éviter cette problématique?

Merci pour vos pistes éventuelles....