Entrar Ainda não tem acesso?
4
respostas

Não consigo criar negociacao dentro da tabela, só no console.log

Referente ao curso JavaScript: conhecendo o Browser e padrões de projeto, no capítulo Temos o modelo, mas e a view? e atividade Construindo um template dinâmico com a função map

por Danilo Souza
| 133.3k xp | 15 posts
técnico em informática

Bom dia. Não consigo criar negociacao dentro da tabela de jeito nenhum, não da erro no console e fica pior pra achar o erro =///////////

class NegociacaoController {
    constructor() {

        let $ = document.querySelector.bind(document)
        this._inputData = $('#data')
        this._inputQuantidade = $('#quantidade')
        this._inputValor = $('#valor')

criar o cadastro
        this._listaNegociacoes = new ListaNegociacoes()

        this._negociacoesView = new NegociacoesView($('#negociacoesView'))

        this._negociacoesView.update(this._listaNegociacoes)
    }


    adicionar(event) {
        event.preventDefault();

            this._listaNegociacoes.adiciona(this._criaNegociacao());
            this._negociacoesView.update(this._listaNegociacoes);
            this._limpaFormulario();
            console.log(this._listaNegociacoes.negociacoes);

    } 


    _criaNegociacao() {
    return    new Negociacao(
            DateHelper.textoParaData(this._inputData.value),
            this._inputQuantidade.value,
            this._inputValor.value
            );
    }


    _limpaFormulario() {
        this._inputData.value = ''
        this._inputQuantidade.value = ''
        this._inputValor.value = ''

        this._inputData.focus()
    }




//______________________________________________

class NegociacoesView {

    constructor(elemento) {
        this._elemento = elemento
    }

    _template(model) {

          return `
        <table class="table table-hover table-bordered">
            <thead>
                <tr>
                    <th>DATA</th>
                    <th>QUANTIDADE</th>
                    <th>VALOR</th>
                    <th>VOLUME</th>
                </tr>
            </thead>
            <tbody>
                ${model.negociacoes.map(function (n) {
                    return 
                    `
                        <tr>
                            <td>${DateHelper.dataParaTexto(n.data)}</td>
                            <td>${n.quantidade}</td>
                            <td>${n.valor}</td>
                            <td>${n.volume}</td>
                        </tr>
                    `
                }).join('')}
            </tbody>
     </table>
            `;
    }

    update(model) {
        this._elemento.innerHTML = this._template(model)
    }
}




//___________________________________________________________________________

class ListaNegociacoes {

    constructor() {

        this._negociacoes = []
    }


    adiciona(negociacao) {

        this._negociacoes.push(negociacao)
    }

    get negociacoes() {
        return [].concat(this._negociacoes);
    }
}
}
4 respostas
por Laís Cavalcanti
| 2576.8k xp | 4815 posts
Instrutor

Oi, Danilo, tudo bem?

Tu poderia passar o arquivo da classe Negociacao.js pra eu testar por completo o seu código?

por Christian Corrales
| 40.4k xp | 1 posts
Estagiário

O código em JS parece ok, tenta dar uma olhada no seu HTML se existe mesmo a div com o id "negociacoesView".

por Danilo Souza
| 133.3k xp | 15 posts
técnico em informática

Desculpe pela demora pessoal. Bom dia!!! Segue o Index e Negociacao.js 

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Negociações</title>
    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" href="css/bootstrap-theme.css">

</head>
<body class="container">

    <h1 class="text-center">Negociações</h1>

    <form class="form" onsubmit="controle.adicionar(event)">

        <div class="form-group">
            <label for="data">Data</label>
            <input type="date" id="data" class="form-control" required autofocus/>        
        </div>    

        <div class="form-group">
            <label for="quantidade">Quantidade</label>
            <input type="number" min="1" step="1" id="quantidade" class="form-control" value="1" required/>
        </div>

        <div class="form-group">
            <label for="valor">Valor</label>
            <input id="valor" type="number" class="form-control"  min="0.01" step="0.01" value="0.0" required />
        </div>

        <button class="btn btn-primary" type="submit">Incluir</button>
    </form>

    <div class="text-center">
        <button class="btn btn-primary text-center" type="button">
            Importar Negociações
        </button>
        <button class="btn btn-primary text-center" type="button">
            Apagar
        </button>
    </div> 
    <br>
    <br>

    <div id="negociacoesView"></div>

    <script src="app/models/Negociacao.js"></script>
    <script src="app/controller/NegociacaoController.js"></script>
    <script src="app/helper/DateHelper.js"></script>
    <script src="app/models/ListaNegociacoes.js"></script>
    <script src="app/view/negociacoesView.js"></script>

    <script>

        let controle = new NegociacaoController()


    </script>
</body>
</html>



class Negociacao {

    constructor(data, quantidade,valor) {
        this._data = new Date(data.getTime())
        this._quantidade = quantidade
        this._valor = valor
        Object.freeze(this)
    }

    get obtemVolume() {
        return this._quantidade * this._valor
    }

    get data() {
        return new Date(this._data.getTime())
    }

    get quantidade() {
        return this._quantidade
    }

    get valor() {
        return this._valor
    }
}
por Laís Cavalcanti
| 2576.8k xp | 4815 posts
Instrutor

Oi, Danilo, tudo bem?

Algumas observações, há pontos e vírgulas faltando em várias linhas. No HTML, você está fazendo como o professor, colocando a pasta app dentro da de JS, caso sim, precisa importar, ficando assim:

<script src="js/app/models/ListaNegociacoes.js"></script>
 <script src="js/app/views/NegociacoesView.js"></script>

E ainda no HTML:

let negociacaoController = new NegociacaoController();

No negociacoesView, tire o retorno da função:

${model.negociacoes.map(function (n) {
                    `
                        <tr>
                            <td>${DateHelper.dataParaTexto(n.data)}</td>
                            <td>${n.quantidade}</td>
                            <td>${n.valor}</td>
                            <td>${n.volume}</td>
                        </tr>
                    `
                }).join('')}

Faça as alterações, se persistir, não hesite em vir aqui :}}}