Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
4
respostas

Tentei fazer igual a explicação da aula

Referente ao curso JavaScript: conhecendo o Browser e padrões de projeto, no capítulo Temos o modelo, mas e a view? e atividade Imprimindo com map

por Paula Regina Machado Coelho
| 81.8k xp | 9 posts

Tentei fazer o exercício me baseando no que foi apresentado em aula, porém a tabela não é apresentada e nenhum erro também. Onde estou errando?

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <table>
        <thead>
            <tr>
                <th>Nome</th>
                <th>Endereço</th>
                <th>Salário</th>
            </tr>
        </thead>

        <tbody>
        <tbody>
    </table>

    <script src="ListarFuncionarios.js"></script>

    <script>
        let funcionarios = [
            {
                "nome": "Douglas",
                "endereco": "Rua da esquina, 123",
                "salario": "4500"
            },
            {
                "nome": "Felipe",
                "endereco": "Rua da virada, 456",
                "salario": "5000"
            },
            {
                "nome": "Silvio",
                "endereco": "Rua da aresta, 789",
                "salario": "6000"
            }
        ];

        let funcionario = new ListarFuncionarios(funcionarios);

        console.log(funcionario.lista);
    </script>
</body>

</html>
class ListarFuncionarios {

    construct(funcionarios) {

        this._funcionarios = funcionarios;
        this._elemento = document.querySelector("tbody");

        this._update();
    }

    _template() {

        return `
            ${this._funcionarios.map(f => `
                <tr>
                    <td>${f.nome}</td>
                    <td>${f.endereco}</td>
                    <td>${f.salario}</td>
                </tr>
            `).join('')} //Ao utilizarmos o join(), usamos como critério de junção uma string em branco. Agora, teremos uma string com todos os dados do array concatenados
        `;
    }

    _update() {

        this._elemento.innerHTML = this._template();
    }

    get lista() {

        return [].concat(funcionarios);
    }

}
4 respostas
por Laís Cavalcanti
| 2577.8k xp | 4815 posts
Instrutor

Oi, Paula, tudo bem? Verifica se o caminho da sua exportação do teu arquivo js está certinho?

<script src="ListarFuncionarios.js"></script>

Ex.: 

 <script src =" js/..."></script>

Testei o teu código (no firefox e no chrome) e deu certo, abri o console e apareceu a lista de funcionários :

  • Array(3) 0: {nome: "Douglas", endereco: "Rua da esquina, 123", salario: "4500"} 1: {nome: "Felipe", endereco: "Rua da virada, 456", salario: "5000"} 2: {nome: "Silvio", endereco: "Rua da aresta, 789", salario: "6000"} length: 3

Não é isso que você deseja?

por Paula Regina Machado Coelho
| 81.8k xp | 9 posts

Olá Lais! Obrigada pela resposta rápida! Gostaria de imprimir na tabela do HTML a listagem dos funcionários. O professor resolveu o exercício (código abaixo), mas eu queria fazer seguindo o modelo dos vídeos apresentados na Aula 5.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <table>
        <thead>
        <tr>
                    <th>Nome</th>
                    <th>Endereço</th>
                    <th>Salário</th>
            </tr>
        </thead>

        <tbody>

        </tbody>    

    </table>

    <script>

        let funcionarios = [
            {
                "nome": "Douglas",
                "endereco" : "Rua da esquina, 123",
                "salario" : "4500"
            },
            {
                "nome": "Felipe",
                "endereco" : "Rua da virada, 456",
                "salario" : "5000"
            },
            {
                "nome": "Silvio",
                "endereco" : "Rua da aresta, 789",
                "salario" : "6000"
            }
        ];

        // Antes tinhamos : funcionarios = [{objeto_func1},{objeto_func2},{objeto_func3}];

        let funcionariosEmHtml = funcionarios.map(f => `
                <tr>
                    <td>${f.nome}</td>
                    <td>${f.endereco}</td>
                    <td>${f.salario}</td>
                </tr>
            `);

        // Agora temos: funcionariosEmHtml = ["<tr><td>...</td></tr>","<tr><td>...</td></tr>","<tr><td>...</td></tr>"];

        let htmlConcatenado = funcionariosEmHtml.join('');

        // Agora temos: htmlConcatenado = ["<tr><td>...</td></tr><tr><td>...</td></tr><tr><td>...</td></tr>"];            

        let tabela =  document.querySelector("tbody");
        tabela.innerHTML = htmlConcatenado;

    </script>
</body>
</html>
solução!
por Laís Cavalcanti
| 2577.8k xp | 4815 posts
Instrutor

Entendi, Paula. Estudei melhor o seu código, testei ele e a tabela foi apresentada, três coisas:

1) A sequência da tag script tá sendo carregada na ordem errada. Primeiro o que precisa ser carregado é o seu script com array, só depois sua classe ListarFuncionario.

<script>
        let funcionarios = [
      ...
            }
        ];

        let funcionario = new ListarFuncionarios(funcionarios);

        console.log(funcionario.lista);
    </script>
<script src="ListarFuncionarios.js"></script>

2) O seu let funcionario = new ListarFuncionarios(funcionarios); precisa vir numa tag script só pra ele:

<script>
        let funcionario = new ListarFuncionarios(funcionarios);
        console.log(funcionario.lista);
    </script>

Obs.: esse script vem após do arquivo src="ListarFuncionarios.js.

3) No teu arquivo js a propriedade construtora se chama : constructor.

Testa e me diz se deu certo :}

por Paula Regina Machado Coelho
| 81.8k xp | 9 posts

Noooosa Lais! Muito obrigada! O que não é outra pessoa revisar pra gente! Deu super certo! :****