What is the way to create dynamic table in HTML and JS?

Question

Hello, I’m having trouble putting together a screen with HTML, CSS, JS, Angularjs. I need to assemble a screen where the user chooses the amount of plots, course; and according to this must assemble : a table where in the first row must contain the months (which will be respective the amount of plots chosen); in the second line it must contain the number of weeks of each month; in the third line the course modules that will be divided proportionally between the number of months; in the fourth the disciplines since the respective modules (each module has the specific disciplines); and in the last line the lessons of each of the disciplines. Remembering that this should be aligned and will be mounted according to what the user will choose.

I have no idea how to dynamically assemble this screen. Could someone help me ????

Answer 1

Friend,

Your question is not specific. Do you have problems with logic or with language/technology (Angular, javascript, ...)? Information is also missing. How will the data be received in the angular controller? Is it a JSON? What would be how many weeks of the month? (from month count, how will you count the weeks - if the first day of the month is a Saturday, already counts as a week, etc, etc)

Assuming the difficulty is in logic, I tried to reproduce the proposed scenario:

var project = angular.module("meuProjeto", [

        ]);

        angular.module("meuProjeto").controller('MeuController', function () {

            var self = this;

            this.parcelas = null;
            this.curso = null;
            this.cursos = [
                {
                    id: "1",
                    nome: "Curso 1",
                    modulos: [
                        {
                            id: "1",
                            nome: "Modulo 1",
                            disciplinas: [
                                {
                                    id: "1",
                                    nome: "Disciplina 1",
                                    licoes: [
                                        {
                                            id: "1",
                                            nome: "Lição 1"
                                        },
                                        {
                                            id: "2",
                                            nome: "Lição 2"
                                        }
                                    ]
                                },
                                {
                                    id: "2",
                                    nome: "Disciplina 2",
                                    licoes: [
                                        {
                                            id: "3",
                                            nome: "Lição 3"
                                        },
                                        {
                                            id: "4",
                                            nome: "Lição 4"
                                        },
                                        ,
                                        {
                                            id: "5",
                                            nome: "Lição 5"
                                        }
                                    ]
                                },
                                {
                                    id: "3",
                                    nome: "Disciplina 3",
                                    licoes: [
                                        {
                                            id: "6",
                                            nome: "Lição 6"
                                        }
                                    ]
                                },
                            ]
                        },
                        {
                            id: "2",
                            nome: "Modulo 2",
                            disciplinas: [
                                {
                                    id: "4",
                                    nome: "Disciplina 4",
                                    licoes: [
                                        {
                                            id: "6",
                                            nome: "Lição 6"
                                        }
                                    ]
                                },
                                {
                                    id: "5",
                                    nome: "Disciplina 5",
                                    licoes: [
                                        {
                                            id: "6",
                                            nome: "Lição 6"
                                        }
                                    ]
                                },
                                {
                                    id: "6",
                                    nome: "Disciplina 6",
                                    licoes: [ ]
                                }
                            ]
                        },
                        {
                            id: "3",
                            nome: "Modulo 3",
                            disciplinas: [
                                {
                                    id: "7",
                                    nome: "Disciplina 7",
                                    licoes: []
                                },
                                {
                                    id: "8",
                                    nome: "Disciplina 8",
                                    licoes: []
                                },
                                {
                                    id: "9",
                                    nome: "Disciplina 9",
                                    licoes: []
                                }
                            ]
                        },
                        {
                            id: "4",
                            nome: "Modulo 4",
                            disciplinas: [
                                {
                                    id: "10",
                                    nome: "Disciplina 10",
                                    licoes: []
                                },
                                {
                                    id: "11",
                                    nome: "Disciplina 11",
                                    licoes: []
                                },
                                {
                                    id: "12",
                                    nome: "Disciplina 12",
                                    licoes: []
                                }
                            ]
                        }
                    ]
                },
                {
                    id: "2",
                    nome: "Curso 2",
                    modulos: [
                        {
                            id: "1",
                            nome: "Modulo 1",
                            disciplinas: [
                                {
                                    id: "1",
                                    nome: "Disciplina 1",
                                    licoes: []
                                },
                                {
                                    id: "2",
                                    nome: "Disciplina 2",
                                    licoes: []
                                },
                                {
                                    id: "3",
                                    nome: "Disciplina 3",
                                    licoes: []
                                }
                            ]
                        },
                        {
                            id: "2",
                            nome: "Modulo 2",
                            disciplinas: [
                                {
                                    id: "4",
                                    nome: "Disciplina 4",
                                    licoes: []
                                },
                                {
                                    id: "5",
                                    nome: "Disciplina 5",
                                    licoes: []
                                },
                                {
                                    id: "6",
                                    nome: "Disciplina 6",
                                    licoes: []
                                }
                            ]
                        },
                        {
                            id: "3",
                            nome: "Modulo 3",
                            disciplinas: [
                                {
                                    id: "7",
                                    nome: "Disciplina 7",
                                    licoes: []
                                },
                                {
                                    id: "8",
                                    nome: "Disciplina 8",
                                    licoes: [
                                        {
                                            id: "3",
                                            nome: "Lição 3"
                                        },
                                        {
                                            id: "4",
                                            nome: "Lição 4"
                                        },
                                        ,
                                        {
                                            id: "5",
                                            nome: "Lição 5"
                                        }
                                    ]
                                },
                                {
                                    id: "9",
                                    nome: "Disciplina 9",
                                    licoes: []
                                }
                            ]
                        },
                        {
                            id: "4",
                            nome: "Modulo 4",
                            disciplinas: [
                                {
                                    id: "10",
                                    nome: "Disciplina 10",
                                    licoes: []
                                },
                                {
                                    id: "11",
                                    nome: "Disciplina 11",
                                    licoes: []
                                },
                                {
                                    id: "12",
                                    nome: "Disciplina 12",
                                    licoes: []
                                }
                            ]
                        },
                        {
                            id: "5",
                            nome: "Modulo 5",
                            disciplinas: [
                                {
                                    id: "13",
                                    nome: "Disciplina 10",
                                    licoes: []
                                },
                                {
                                    id: "14",
                                    nome: "Disciplina 11",
                                    licoes: []
                                },
                                {
                                    id: "15",
                                    nome: "Disciplina 12",
                                    licoes: []
                                }
                            ]
                        },
                        {
                            id: "6",
                            nome: "Modulo 6",
                            disciplinas: [
                                {
                                    id: "16",
                                    nome: "Disciplina 10",
                                    licoes: []
                                },
                                {
                                    id: "17",
                                    nome: "Disciplina 11",
                                    licoes: []
                                },
                                {
                                    id: "18",
                                    nome: "Disciplina 12",
                                    licoes: []
                                }
                            ]
                        }
                    ]
                },
            ];
            this.arrayMeses = null;
            
            this.cursoSelecionado = null;

            this.Exibir = function ()
            {
                angular.forEach(self.cursos, function (value, key) {
                    
                    if(value.id == self.curso)
                    {
                        self.cursoSelecionado = value;
                    }

                });

                self.arrayMeses = self.GetArrayMeses();
                self.GetModulo();
            }

            this.GetArrayMeses = function()
            {
                var retorno = [];
                var i = 1;
                while(i <= self.parcelas)
                {
                    retorno.push(i);
                    i++;
                }
                return retorno;
            }

            this.GetModulo = function ()
            {
                //quantos modulos há e quantos meses
                var totalModulos = self.cursoSelecionado.modulos.length;
                var modulosPorMes = parseInt(totalModulos / self.parcelas);
                var resto = parseInt(totalModulos % self.parcelas);

                self.cursoSelecionado.meses = {};

                var ultimoIdProcessado = 0;

                angular.forEach(self.arrayMeses, function (value) {

                    self.cursoSelecionado.meses[value] = [];

                    var processadoMes = 0;

                    angular.forEach(self.cursoSelecionado.modulos, function (modulo, i) {

                        var modulosAdicionais = 0;

                        if (resto - (i - 1) > 0) {
                            modulosAdicionais = 1;
                        }

                        if(processadoMes < (modulosPorMes+modulosAdicionais))
                        {
                            if (ultimoIdProcessado < modulo.id)
                            {
                                self.cursoSelecionado.meses[value].push(modulo);
                                processadoMes++;
                                ultimoIdProcessado = modulo.id;
                            }   
                        }
                    });

                });


            };

        });

<html ng-app="meuProjeto">
<head>

</head>
<body ng-controller="MeuController as M">

    <div>
        <input type="text" ng-model="M.parcelas" placeholder="Parcelas" />
        <select id="repeatSelect" ng-model="M.curso">
            <option ng-repeat="option in M.cursos" value="{{option.id}}">{{option.nome}}</option>
        </select>
        <input type="button" value="Exibir" ng-click="M.Exibir()"/>
    </div>

    <table border="1">
        <thead>
            <tr>
                <th>Meses</th>
                <th ng-repeat="i in M.arrayMeses">Mês {{i}}</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Semanas</td>
                <td ng-repeat="i in M.arrayMeses">4</td>
            </tr>
            <tr>
                <td>Módulos</td>
                <td ng-repeat="i in M.arrayMeses">
                    <p ng-repeat="j in M.cursoSelecionado.meses[i]">{{j.nome}}</p>
                </td>
            </tr>
            <tr>
                <td>Disciplinas</td>
                <td ng-repeat="i in M.arrayMeses">
                    <div ng-repeat="j in M.cursoSelecionado.meses[i]">
                        <p ng-repeat="z in j.disciplinas">{{z.nome}}</p>
                    </div>
                </td>
            </tr>
            <tr>
                <td>Lições</td>
                <td ng-repeat="i in M.arrayMeses">
                    <div ng-repeat="j in M.cursoSelecionado.meses[i]">
                        <div ng-repeat="z in j.disciplinas">
                            <p ng-repeat="y in z.licoes">{{y.nome}}</p>
                        </div>
                    </div>
                </td>
            </tr>
        </tbody>
    </table>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</body>
</html>