JSON to be passed from Apex to Lightning Component and display it in a data table

Question

Below is my JSON, out of which I need ID, StartTime,DurationMilliseconds,LogLength. Below is the code that I tried but it is returning only all the values in a single line.Any help would be apreciated:

{
   "size":6,
   "totalSize":6,
   "done":true,
   "queryLocator":null,
   "entityTypeName":"ApexLog",
   "records":[
      {
         "attributes":{
            "type":"ApexLog",
            "url":"/services/data/v50.0/tooling/sobjects/ApexLog/07L0o00005Y2fE1EAJ"
         },
         "Id":"07L0o00005Y2fE1EAJ",
         "StartTime":"2020-12-18T08:46:24.000+0000",
         "DurationMilliseconds":230,
         "LogLength":3883
      },
      {
         "attributes":{
            "type":"ApexLog",
            "url":"/services/data/v50.0/tooling/sobjects/ApexLog/07L0o00005Y2fE1EAJ"
         },
         "Id":"07L0o00005Y2fE1EAJ",
         "StartTime":"2020-12-18T08:46:24.000+0000",
         "DurationMilliseconds":230,
         "LogLength":3883
      }
   ]
}

================Controller.js==================

({
    doInit : function(component, event, helper) {
        var action = component.get("c.GetLogs"); 
        
        action.setCallback(this, function(response) {
            var state = response.getState();
            if (state === "SUCCESS") {                
               
                var conts= JSON.stringify(response.getReturnValue());
                console.log(conts);
                var res=conts.split(',');
                
                console.log('alert'+res[0].replace('{',' '));
                component.set("v.record",res); 
            } 
    });           
        $A.enqueueAction(action);
    }
})

=====================Component==================

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId" access="global" controller="DebugLogCallout">
    <!-- attributes -->
    <aura:attribute name="data" type="Object"/>
    <aura:attribute name="columns" type="List"/>
    <aura:attribute name="record" type="String[]" description="Debug Logs visible below"/>
     
    <!-- handlers-->
    <aura:handler name ="init" value ="{!this}" action = "{!c.doInit}"/>
    <div style="height: 300px">
        <!-- <lightning:datatable
            columns="{! v.columns }"
            data="{! v.records}"
            keyField="id"
            onrowaction="{! c.handleRowAction }"/> -->
    </div>
        <table class="slds-table slds-table_bordered slds-table_cell-buffer slds-table_col-bordered slds-table_striped">
            <thead>
                <tr class="slds-text-title_caps">
                    
                    <th scope="col">
                        <div title="Key">Key</div>
                    </th>
                    <th scope="col">
                        <div title="Value">Value</div>
                    </th>
                </tr>
            </thead>
            <tbody>
                
                <aura:iteration items="{!v.record}" var="opp" indexVar="key">
                    <tr>
                        
                        <th scope="col">
                            <div>{!opp}</div>
                        </th>
                        
                        
                    </tr>
                </aura:iteration>
            </tbody>
        </table>
</aura:component>

========================Apex=================

public class DebugLogCallout {
    
    @AuraEnabled
    public static List<Object> GetLogs(){
        List<Object> objMap= new List<Object>();
        Map<String,Object> map1= new Map<String,Object>();  
        Map<String,Object> finalMap= new Map<String,Object>();  
        List<Map<string, object>> rec = new List<Map<String,Object>>();
        Map<string, object> attr = new Map<String,Object>();
        List<String> recIds = new List<String>();
        Http h = new Http();
        
        HttpRequest req = new HttpRequest();
        String FirstName = UserInfo.getFirstName();
        
        req.setHeader('Authorization', 'BASIC {!$Credential.OAuthToken}');
        req.setHeader('Content-Type', 'application/json');
        req.setEndpoint('callout:Debug_Log/services/data/v50.0/tooling/query/?q=Select+id,StartTime,DurationMilliseconds,LogLength+from+ApexLog+Where+LogUser.FirstName=\''+FirstName+'\'');
        req.setMethod('GET');
        system.debug(req);
        HttpResponse res = h.send(req);
        if (res.getStatusCode() == 200) {
            map1=(Map<String,Object>)JSON.deserializeUntyped(res.getBody());
            System.debug(res.getBody());
            System.debug('map1----'+map1);
             objMap = (List<Object>)map1.get('records');    
            System.debug('objMap----'+ObjMap);
            for(Object o : objMap)
            {
                attr = (Map<string, object>)o;                            
                attr.remove('attributes');
                rec.add(attr);
            }
        }      
        
        System.debug('strMapList'+rec);
        return rec;   
    }
}

===============================================================

Answer 1

This is the wrong way to handle JSON.

            var conts= JSON.stringify(response.getReturnValue());
            console.log(conts);
            var res=conts.split(',');
            
            console.log('alert'+res[0].replace('{',' '));
            component.set("v.record",res); 
            

You're turning your JSON, a nice structured object that you can process easily in code, into a string, and then doing replaces on it. Don't do that.

You really do not need to do any of the data manipulation you're currently doing. Simply return the entire response body from Apex:

    HttpResponse res = h.send(req);
    if (res.getStatusCode() == 200) {
        return res.getBody();
        

and in JavaScript, extract the record data that you want:

        var state = response.getState();
        if (state === "SUCCESS") {                
            component.set("v.records", response.getReturnValue()["records"]); 
            

and wire your Lightning data table component up to the v.records attribute, with an appropriate column set for the record data.