javascript Dados Json em HTML utilizando loop e Acionar evento change de um Dropdown List

WagnerFilho · Julho 9, 2020

Olá,

Eu escrevi um exemplo de trabalho de um problema real que estou tentando resolver

Criei um objeto simulando o retorno json que recebo do banco de dados.

Eu preciso:

Listar contratos e lotes de contratos
Ao entrar na função, marcar o último `lote` do `contrato` como selecionado no Dropdown List
Ao entrar na função, exibir as faturas `lote` e `contrato` selecionado no elemento `ul-invoices`
Carregar e exibir as respectivas `faturas` ao alterar o `lote`

Problemas:

Não consigo listar as `faturas` do último `lote` do `contrato selecionado` ao carregar a função.
Não consigo listar as `faturas` ao `alterar` o `lote` do `contrato`

Observação:

Ao entrar na página, já tenho as informações do contrato selecionado; no caso do exemplo, deixei o contrato com o ID 1.
No exemplo estou usando a classe `in-attendance` para definir o contrato selecionado
Estou usando `Revealing Pattern` e quero manter este padrão

Tradução

contracts = contratos
batches = lotes
invoices = faturas

Exemplo

<html>
    <label id="contracts"></label>
    <ul id="ul-invoices"></ul>
    <pre></pre>
    
    <script>
        let lblContract = document.querySelector('#contracts');
        let UlInvoices = document.querySelector('#ul-invoices');
        
        let contractInAttendance = 1;
        
        const objectContract = {
            id: 1,
            nome: 'wagner',
            contracts: [{
                id: 1,
                contract: '123456',
                batches: [ {
                    id: 1,
                    contract_id: 1,
                    batch: '1',
                    invoices: [ {
                        value: 10,
                        batch_id: 1,
                    }]
                },
                {
                    id: 2,
                    contract_id: 1,
                    batch: '2',
                    invoices: [{
                        value: 10,
                        batch_id: 2,
                    }]
                }]
            },
            {
                id: 2,
                contract: '246789',
                batches: [ {
                    id: 3,
                    contract_id: 2,
                    batch: '1',
                    invoices: [ {
                        value: 20,
                        batch_id: 3,
                    }]
                }]
            }]
        }
        
        const revelling = (function() {
        
            function privateInit() {
                const contracts = objectContract.contracts;
                let contractFilteredById = contracts.filter(contract => contract.id === contractInAttendance);
                
                for (const contract of contracts) {
                    const selectedContract = contract.id === contractFilteredById[0].id ? 'in-attendance' : '';
                
                    let htmlForBatchsOptions = contract.batches.map(batch => `<option value=${batch.id}>${batch.batch}</option>`).join('');
                    lblContract.innerHTML +=
                    `<div class="contract-${selectedContract}" style="display: flex;">
                        <div id="contract-${contract.contract}" data-contract="${contract.id}" class="loren">
                            <span>${contract.contract}</span>
                        </div>
                        <div class="ipsulum" style="margin-left: 5px;">
                            <select class="sel-batch">
                                ${htmlForBatchsOptions}
                            </select>
                        </div>
                    </div>`;
                    
                    const batchOption = lblContract.querySelector('select.sel-batch');
                    batchOption.addEventListener('change', getInvoices);
                    //batchOption.value = 2;
                }
            }
           
            function getInvoices() {
                const batchValue = event.target.value
                console.log(batchValue);
                //console.log(this.value);
            }
            
            return {
               init: privateInit()
            }
            
        })();
        revelling.init;
    </script>
    
</html>