Apex – How to Display Response Data from Apex Controller in DataTable

You need to parse your JSON into JavaScript Object and then manipulate with that object.

If you always get the same JSON format the Code for you will look in next way :

Apex :

public with sharing class ParseJsonIntoDatatableController {
    @AuraEnabled
    public static string getJSONData(){
        try {
            String jsonData;
            // somw your logic which gets JSON Data
            return jsonData;
        } catch (Exception e) {
            throw new AuraHandledException(e.getMessage());
        }
    }
}

**Aura JS : **

({
    init : function(component, event, helper) {
        // helper constant for column Labels
        const columnLabelMap = {
            session_id : 'Session Id',
            visitor_id : 'Visitor Id',
            timestamp : 'Time',
            resolution : 'Resolution',
            device_type : 'Device Type',
        }
        var action = component.get("c.getJSONData");
        // the callback for parsing data from JSON
        action.setCallback(this, function(response) {
            var state = response.getState();
            if (state === "SUCCESS") {
                let responseData = JSON.parse( response.getReturnValue() );
                let dataTableColumns = []
                responseData.meta.columns.forEach( column => {
                    dataTableColumns.push( 
                        {
                            label : columnLabelMap[column] ? columnLabelMap[column] : column,
                            fieldName : column,
                            type: 'text'
                        }
                    )
                });
                component.set( "v.columns" , dataTableColumns );
                let dataForDatatable = []
                responseData.data.forEach( element => {
                    dataForDatatable.push( 
                        {
                            session_id : element[0],
                            visitor_id : element[1],
                            timestamp : element[2],
                            resolution : element[3],
                            device_type : element[4][1],
                        }
                    )
                });
                component.set( "v.dataTableData" , dataForDatatable );
            }
        });
        $A.enqueueAction(action);
    }
})

**Aura HTML : **

<aura:component controller="ParseJsonIntoDatatableController" implements="flexipage:availableForAllPageTypes" access="global">
    <aura:attribute name="dataTableData" type="Object"/>
    <aura:attribute name="columns" type="List"/>
    <!-- handlers-->
    <aura:handler name="init" value="{! this }" action="{! c.init }"/>


    <!-- the container element determine the height of the datatable -->
    <div style="height: 300px">
        <lightning:datatable
            keyField="session_id"
            data="{! v.dataTableData }"
            columns="{! v.columns }"
            hideCheckboxColumn="true"
            resizeColumnDisabled="true"
            minColumnWidth="100"
            maxColumnWidth="1000" 
            showRowNumberColumn="true"
        ></lightning:datatable>
    </div>
</aura:component>

Note :
this code will only work for your JSON format,
you can modify the parser for your wishes,
it will be good to set the column types dynamically as well

With that code you will get the next datatable