Dados Json em HTML utilizando loop e Acionar evento change de um Dropdown List
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>Discussão (0)
Carregando comentários...