I have been given a task to make query builder which will make query and fetch data accordingly . So I have completed it but while displaying the table I am not able to display the label name as heading . I am getting api name as table heading . So can anyone please suggest m the edits in my code.
Here is the code


Apex controller:

public class FinalQueryBuilderApex {
  @AuraEnabled
   public static List<String> getObjectName(){
        List<String> objects=new List<String>();
       List<Schema.SObjectType> gd = Schema.getGlobalDescribe().Values();  
        for(SObjectType sot:gd){
           objects.add(sot.getDescribe().getName());
        }
       System.debug('objects'+objects);
        return objects;
    }
    @AuraEnabled
    public static List<String> listAllObject(){
        List<String> objectList = new List<String>();
        For(Schema.sObjectType sobj: schema.getGlobalDescribe().values()){
            if(sobj.getDescribe().isQueryable())
                objectList.add(sobj.getDescribe().getName()+'####'+sobj.getDescribe().getLabel());
        }
        objectList.sort();
        System.debug('objectList'+objectList);
        return objectList;
    }
 
  @AuraEnabled
public static Map<String, String> getObjectFields(String objName) {
    Map<String, String> retVal = new Map<String, String>();
    Map<String, Schema.SObjectField> fieldMap = Schema.getGlobalDescribe().get(objName).getDescribe().fields.getMap();
    for (String fieldName: fieldMap.keySet()) {  
        retVal.put(fieldMap.get(fieldName).getDescribe().getName(), fieldMap.get(fieldName).getDescribe().getLabel());
    }
     System.debug('retVal'+retVal);
    return retVal;
   
}
        @AuraEnabled
   public static DynamicBindingWrapper listAllFields(String objectname,String fieldlist){
       String[] lststr;
String response = '';
lststr=(string[])JSON.deserialize(fieldlist,List<String>.class);

System.debug('lststr'+lststr);
       // String objectname='Account';
        System.debug('fieldlist'+fieldlist);
        System.debug('objectname'+objectname);
        DynamicBindingWrapper dynamicData = new DynamicBindingWrapper();
        List<fieldDataWrapper> wrapperList =  new List<fieldDataWrapper>();
        // Create Dynamic Query Start ..
        String theQuery = 'SELECT ';
       
        for(String s:lststr){
              fieldDataWrapper wrapper = new fieldDataWrapper();
            theQuery=theQuery+s+',';  
          //  wrapper.label = field.getDescribe().getLabel();
            //wrapper.apiName = field.getDescribe().getName();
            wrapperList.add(wrapper);

        //}
       }
        // Trim last comma
        theQuery = theQuery.subString(0, theQuery.length() - 1);
        // Finalize query string
        theQuery += ' FROM '+objectName+' LIMIT 15';
        // Query End ..
        System.debug('#### theQuery = '+theQuery);
        List<sObject> objectData = Database.Query(theQuery);
        if(objectData!=null && objectData.size()>0)
            dynamicData.sObjectData = objectData;
        else
            dynamicData.sObjectData = new List<sObject>{};
        dynamicData.fieldList = wrapperList;
        System.debug('#### dynamicData '+dynamicData);
        return dynamicData;
    }
    /* Class to store the dynamic data 
     * and list of related fields
     */ 
    public class DynamicBindingWrapper{
        @AuraEnabled
        public List<sObject> sObjectData    { get; set; }
        @AuraEnabled
        public List<fieldDataWrapper> fieldList { get; set; }
    }
    /*
     * Class to store the field information
     */ 
    public class fieldDataWrapper{
        @AuraEnabled
        public String label { get; set; }
        @AuraEnabled
        public String apiName { get; set; }
    }

}


Helper class:


({
onInit : function(component, event, helper) {
        /* Call the Apex class method to fetch the List of all object */
        var action = component.get('c.listAllObject');
        action.setCallback(this, function(response){
            var state = response.getState();
            if(state === 'SUCCESS' && component.isValid()){
                /* set the value to the attribute of the component */
                var responseValue = response.getReturnValue();
                var lstOptions = [];
                for(var i=0; i < responseValue.length; i++){
                    lstOptions.push({
                        value : responseValue[i].split('####')[1],
                        key : responseValue[i].split('####')[0]
                    });
                }
                lstOptions.sort();
                component.set('v.objectList', lstOptions);
                
            }else{
                var errors = response.getError();
                $A.log(errors);
                if(errors || errors[0].message){
                    console(errors[0].message);
                }
            }
        });
        $A.enqueueAction(action);
    },
   init2winit : function(component, event, helper) {
            var selObject = component.find('selectObject').get('v.value');
//var selObject = component.get('v.selectObject');
    var action = component.get('c.getObjectFields');
    action.setParams({
       "objName":selObject
    });

    action.setCallback(this, function(response){
        var options = [];
        var fieldMap = response.getReturnValue(); 
        for (var k in fieldMap) {
            options.push({ value:k, label:fieldMap[k]});
        }
        component.set('v.options', options);
    });
    $A.enqueueAction(action); 
},
    onHandleChange : function(component, event, helper){
        /* Call this method whenever user will select the Obejct
         * and show the Dynamic Content */
        var selObject = component.find('selectObject').get('v.value');
        var selfield=component.get('v.selectedArray');
         console.log('JSON.stringify(selfield)',JSON.stringify(selfield));
          var selected=JSON.stringify(selfield);
        var action = component.get('c.listAllFields');
        if(selected!=null && selected!='' && selected!=undefined){
            action.setParams({
                "objectname":selObject ,
                "fieldlist" : selected 
                
            });
            action.setCallback(this, function(response){
                var state = response.getState();
                if( state === 'SUCCESS' && component.isValid()){
                    component.find('sfdcDiv').set("v.body",[]);
                    var responseValue=response.getReturnValue();
                    // var responseValue = JSON.parse(response.getReturnValue());
                    //var responseValue = JSON.stringify(response.getReturnValue());
                    console.log('responseValue',responseValue);
                    //component.set( "v.listofrecords", response.getReturnValue() );
                    var objectValue   = responseValue.sObjectData;
                    var fieldList     = component.get("v.selectedArray");//responseValue.fieldList;
                    console.log('objectValue'+objectValue);
                    console.log('fieldList'+fieldList);
                    /* Create Dynamic Table */
                    var sObjectDataTableHeader = [];
                    // Create table Header
                    for (var i=0; i <  fieldList.length; i++) {
                        sObjectDataTableHeader.push(fieldList[i]);
                    }
                    console.log(sObjectDataTableHeader);
                    //Get the count of columns.
                    var columnCount = sObjectDataTableHeader.length;
                    //Create a HTML Table element.
                    var table = document.createElement("TABLE");
                    //table.border = "1";
                    //Add the header row.
                    var row = table.insertRow(-1);
                    for (var i = 0; i < columnCount; i++) {
                        var headerCell = document.createElement("TH");
                        headerCell.innerHTML = sObjectDataTableHeader[i];
                        headerCell.className='hearderClass';
                        row.appendChild(headerCell);
                    }
                    var dvTable = document.getElementById("sfdctable");
                    dvTable.innerHTML = "";
                    dvTable.appendChild(table);
                    /* Create Dynamic Table End */
                    
                    if(objectValue.length){
                        for(var j=0; j < objectValue.length; j++){
                            // Dynamic table Row
                            row = table.insertRow(-1);
                            // Dynamic Table Row End 
                            for (var i=0; i <  fieldList.length; i++) {
                                // Dynamic table Row
                                var cell = row.insertCell(-1);
                                cell.innerHTML = objectValue[j][fieldList[i]];
                                component.set('v.isSending' , false);
                                
                            }
                        }
                    }else{
                        
                    }
                }else{
                    var errors = response.getError();
                    $A.log('Error Details '+errors);
                    if( errors || errors[0].message){
                        console.log('Error Details '+errors[0].message);
                    }
                }
            });
            $A.enqueueAction(action);
        }else{
            component.set('v.isSending' , false);
        }
    },
})



COmponent:

<aura:component implements="flexipage:availableForAllPageTypes" access="global" controller="FinalQueryBuilderApex" >
 <aura:handler name='init' value='{!this}' action='{!c.doInit}' />
    <aura:attribute name='objectList' type='List' />
<aura:attribute name="options" type="List" />
    <aura:attribute name="selectedArray" type="List" default="[]"/>
    <div class="slds-m-around_small">
        <div class="slds-page-header">
            
        </div><br/>
        <div class="slds-grid slds-wrap">
            <div class="slds-size_1-of-2">
                <div class="slds-box_x-small">
                    <!-- show the list of All the Object -->
                    <lightning:select name="selectObject" label="Select an Object" 
                                      onchange="{!c.doHandlingChange}" aura:id='selectObject'>
                        <option value="" text="- None -" />
                        <aura:iteration items='{!v.objectList}' var='obj'>
                            <option value="{!obj.key}" text="{!obj.value}" />
                        </aura:iteration>
                    </lightning:select>
                </div>
            </div>
            </div>
            <br/>
    <lightning:dualListbox name="fields"  
                       label= "Fields" 
                       sourceLabel="Available" 
                       selectedLabel="Selected" 
                       fieldLevelHelp="This is a dual listbox" 
                       options="{!v.options}" 
                        onchange="{! c.handleChange }"   
                      />
     Selected Values : 
    
    <aura:iteration items="{!v.selectedArray}" var="val" indexVar="indvar">
        <li>
            {!val}
        </li>
        
    </aura:iteration>
                <lightning:button variant="brand" label="Query" onclick="{! c.doHandleChange}" />

    </div>
         <ui:scrollerWrapper class="scrollerSize">
                <div class="slds-size_2-of-2">
                    <div id='sfdctable' aura:id='sfdcDiv'>
                        <!-- devision that will show the dynamic content -->
                        
                    </div>
                </div>
            </ui:scrollerWrapper>
</aura:component>


Controller:


({
    doInit : function(component, event, helper) {
        helper.onInit(component, event, helper);
    },
    doHandlingChange : function(component, event, helper) {
        helper.init2winit(component, event, helper);
    },

   
   handleChange: function (component, event) {
        var selectedOptionsList = event.getParam("value");
        console.log(selectedOptionsList);
        component.set("v.selectedArray", selectedOptionsList);
        
    },
    doHandleChange : function(component, event, helper) {
       alert("You clicked: " + event.getSource().get("v.label"));
        helper.onHandleChange(component, event, helper);
    },
})


Please help me out . Any suggestions are welcome.