Add html elements with Javascript using loop

Question

Hello, Through a objeto, I need to create elements HTML using the loop javascript.

In the example code, and as the print, I realize that when adding batches (lotes), an item is also added undefined.

Well, I just need to display the contracts as if they were a list, and for each contract, add the respective lots into one dropdown list (select option), because then I will display the invoices in another list according to the selected lot.

sample code

<div id="div-contracts"></div>
<style>
#div-contracts {
    display: table-cell;
    width: 100%;
}
.loren {
    float:left;
    width: 45px;
}
.ipsulum {
    float:left;
    width: 35%;
}
</style>


<script>
let object = {
    name: 'wagner',
    contracts: [
        {
            id: 1,
            contract: '123',
            batches: [
                {
                    id: 1,
                    batch: '1',
                    invoices: [
                        {
                            value: 10,
                            due: '01/01/2020',
                        },
                        {
                            value: 10,
                            due: '01/02/2020',
                        },
                    ],
                },
                {
                    id: 2,
                    batch: '2',
                    invoices: [
                        {
                            value: 10,
                            due: '01/04/2020',
                        },
                        {
                            value: 10,
                            due: '01/05/2020',
                        },
                    ],
                },
            ]
        },
        {
            id: 1,
            contract: '456',
            batches: [
                {
                    id: 3,
                    batch: '1',
                    invoices: [
                        {
                            value: 15,
                            due: '01/01/2020',
                        },
                        {
                            value: 14,
                            due: '01/02/2020',
                        },
                    ],
                },
            ]
        },
    ]
};

let getById = (id, parent) => parent ? parent.getElementById(id) : getById(id, document);
const DOM =  {
    contract: getById('div-contracts'),
};

function htmlForBatchsOptions(contract) {
    let batchOptions;
    for (const batch of contract.batches) {            
        batchOptions += `<option value="${batch.id}">${batch.batch}</option>`;
    }
    return batchOptions;
    //return document.querySelector('select.sel-batch').innerHTML = batchOptions;
};

for (const contract of object.contracts) {
    DOM.contract.innerHTML +=
    `<div class="contract">
        <div class="loren">
            <span>${contract.contract}</span>
        </div>
        <div class="ipsulum">
            <select class="sel-batch">
                ${htmlForBatchsOptions(contract)}
            </select>
        </div>
    </div>`;
}
</script>

Answer 1

to solve Undefined problems start the variable with empty value before concatenating it:

Let batchOptions = '';