I would like to know what is the best way of doing the following. I have created an object which makes use of Ajax. It is dependent on the returned data to generate form tags etc. The data is a record which is turned into array for the value I need (NAME/STATUS).var HTMLFormTag = (function() {    var selectList;    var generateSelectHTML = function(data, keySameAsValue, addselectvalue, selectedValue){        selectList = document.createElement(select);        selectList.setAttribute(class, form-control);        if(addselectvalue){            var option = document.createElement(option);            option.setAttribute(value, '');            option.text = '--select--';            selectList.appendChild(option);        }        $.each(data, function( index, value ) {            var selected = '';            var option = document.createElement(option);            if(selectedValue.length > 0){                if(value == selectedValue){                    selected = 'selected';                    option.setAttribute(selected, selected);                }else{                    selected = '';                }            }            if(keySameAsValue){                option.setAttribute(value, value);            }else{                option.setAttribute(value, index);            }            option.text = value;            selectList.appendChild(option);        });    }    return {        createSelect : function(data,keySameAsValue, addselectvalue, selectedValue){            generateSelectHTML(data,keySameAsValue, addselectvalue, selectedValue);            return selectList;        }    }})();var CommsMatrix = (function() {    // declare private variables and/or functions    var statuses = [];    var loadData = [];    var protocols = [];    var generateCMDStatuses = function() {        loadData.push($.get( /api/user/list/comms/matrix/data/format/json, {csrf: $.csrfParam('csrf'), select: 'distinct(status)' ,orderby: 'status'}).done(function(data){            if (data.header.error) {            } else {                $.each(data.body.recordset.record, function( index, value ) {                    if(value.STATUS != to implement){                        statuses.push(value.STATUS);                    }                });            }        }));    }    var generateProtocolList = function() {        loadData.push($.get( /api/user/list/sys/list/protocols/format/json, {csrf: $.csrfParam('csrf'), orderby: 'name'}).done(function(data){            if (data.header.error) {            } else {                $.each(data.body.recordset.record, function( index, value ) {                    protocols.push(value.NAME);                });            }        }));    }    return {        createCM: function(params) {              createCommsMatrix(params);            },        genCMDStatuses: function() {            generateCMDStatuses();        },        genProtocolList: function() {            generateProtocolList();        },        getCMDStatuses: function() {            return statuses;        },        getSupportedProtocols: function() {            return protocols;        },        getLoadData : function(){            return loadData;        }    }})();In my main file to get the data I need:$(function(){    CommsMatrix.genCMDStatuses();    CommsMatrix.genProtocolList();    var loadData = CommsMatrix.getLoadData();    var selectField = '';    var selectProtocolField = '';    t = $('table').DataTable( {        paging:   false,        ordering: false,        info:     false,        searching: false,        }    } );    counter = 0;    $('#addRow').on( 'click', function () {        var inputSrcField = '<input size=15 name=src['+counter+'] class=form-control/>';        var inputDstField = '<input size=15 name=dst['+counter+'] class=form-control/>';        var nattype = ['source','destination'];        var selectNatField = HTMLFormTag.createSelect(nattype, true, true, '');        selectNatField.setAttribute(name, 'nat['+counter+']');        selectNatField = selectNatField.outerHTML;        var inputNatField = '<input size=15 name=nat['+counter+'] class=form-control/>';        var inputRemarksField = '<input name=remarks['+counter+'] class=form-control/>';        var textareaSrcPort = '<textarea name=srcport['+counter+']>any</textarea>';        var textareaDstPort = '<textarea name=dstport['+counter+']>any</textarea>';        t.row.add( [            selectField,            inputSrcField,            '',            textareaSrcPort,            inputDstField,            '',            textareaDstPort,            selectNatField,            inputNatField,            selectProtocolField,            inputRemarksField,        ] ).draw( false );        counter++;    } );    $.when(loadData[0],loadData[1]).done(function(data){        var statuses = CommsMatrix.getCMDStatuses();        selectField = HTMLFormTag.createSelect(statuses, true, false, 'To implement');        selectField.setAttribute(name, 'status['+counter+']');        selectField = selectField.outerHTML;        var protocols = CommsMatrix.getSupportedProtocols();        selectProtocolField = HTMLFormTag.createSelect(protocols, true, false, 'TCP');        selectProtocolField.setAttribute(name, 'protocol['+counter+']');        selectProtocolField = selectProtocolField.outerHTML;        $('#addRow').click();    });});Is this an efficient way to do this?
Returning data from JavaScript object
javascript;jquery