Iterate array > populate select box > return select box from function as html

Question

I have to iterate over an array and populate a select box with it, but I dont want to append it to an element in html. I want to use the selectbox in a variable as html.

How can I use the selectbox function outcome inside the variable frm_str as html.

Example:

//users array

{"users":{"48f8fd57-5116-419c-b43a-cff90a4ae39b":"lolololo","4ab9f52a-d445-4b7a-b26d-1f5bc73ea751":"koen","c1d427f2-a39e-4b20-b531-3c325de96d85":"lolololo"}}

        // Setup module
    // ------------------------------
    
    var FullCalendarAdmin = function () {
    
        //
        // Setup module components
        //

var _componentRender = function () {
          _componentFullCalendarAdmin();
        };
    
        //
        // Bootbox message
        //
        var _bootboxContent = function (event, users) {
    
            var _selectUsers = function () {
                var userStr = [];
    
                jQuery.each(users, function (index, item) {
                    userStr.push('<option value="' + index + '">' + item + '</option>');
                });
    
                var object = $('<div/>').html(userStr).contents();
    
                return object;
            }
    
            var frm_str = '<form action="">' +
                '<div class="form-row">' +
                '<label class="col-md-auto col-form-label">Description</label>' +
                '<div class="col-md-8">' +
                '<select>' +
                _selectUsers +
                '</select>' +
                '</div>' +
                '</div>' +
                '</form>';
    
            var object = $('<div/>').html(frm_str).contents();
    
            return object
        }
    
    
        // Basic calendar
        var _componentFullCalendarAdmin = function (events, users) {
    
            // Define element
            var calendarAgendaViewElement = document.querySelector('.fullcalendar-agenda-admin');
    
            // Initialize
            if (calendarAgendaViewElement) {
                var calendarAgendaViewInit = new FullCalendar.Calendar(calendarAgendaViewElement, {
                    plugins: ['dayGrid', 'timeGrid', 'interaction'],
                    selectable: true,
                    select: function (event) {
                        bootbox.dialog({
                            title: 'Nieuwe afspraak.',
                            message: _bootboxContent(event, users),
                            buttons: {
                                success: {
                                    label: 'Save',
                                    className: 'btn-success',
                                    callback: function () {    
                                      
                                                calendarAgendaViewInit.addEvent(eventData);

    
    
                                        bootbox.alert({
                                            title: 'afspraaknaam: ' + name,
                                            message: 'Uw afspraak is toegevoegd.'
                                        });
                                    }
                                }
                            }
                        }
                        );
                        calendarAgendaViewInit.unselect();
                    },
                });
    
                calendarAgendaViewInit.render()
    
            }
        };
    
        //
        // Return objects assigned to module
        //
    
        return {
            init: function () {
                _componentRender();
            }
        }
        
    }();
    
    
    // Initialize module
    // ------------------------------
    
    document.addEventListener('DOMContentLoaded', function () {
        FullCalendarAdmin.init();
    });

        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.10.0/fullcalendar.min.js"></script>
    <script src="https://unpkg.com/@fullcalendar/core/main.min.js"></script>
    <script src="https://unpkg.com/@fullcalendar/interaction/main.min.js"></script>
    <script src="https://unpkg.com/@fullcalendar/daygrid/main.min.js"></script>
    <script src="https://unpkg.com/@fullcalendar/timegrid/main.min.js"></script>
    <script src="https://unpkg.com/@fullcalendar/moment/main.min.js"></script>
    <script src="https://unpkg.com/@fullcalendar/bootstrap/main.min.js"></script>
    <script src="https://unpkg.com/@fullcalendar/timeline/main.min.js"></script>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.10.0/fullcalendar.min.css" />

Answer 1

I fixed my problem using join()

I only needed the values from the array as plain html so figured out using join could fix the problem :)

Thanks for all the help especially user:mplungjan

let _bootboxContent = function (event, users) {

    let _selectUsers = function () {
        var userArray = [];

        jQuery.each(users, function (index, item) {
            userArray.push('<option value="' + index + '">' + item + '</option>');
        });

        const userStr = userArray.join(" ");

        return userStr;
    }

    const frm_str = '<form action="">' +
        '<div class="form-row">' +
        '<label class="col-md-auto col-form-label">Description</label>' +
        '<div class="col-md-8">' +
        '<select>' +
        _selectUsers() +
        '</select>' +
        '</div>' +
        '</div>' +
        '</form>';

    const object = $('<div/>').html(frm_str).contents();

    return object
}