JSON 从 Apex 传递到 Lightning 组件并在数据表中显示

Question

下面是我的 JSON，其中我需要 ID、StartTime、DurationMilliseconds、LogLength。 下面是我尝试过的代码，但它只返回一行中的所有值。任何帮助都将不胜感激：

{
   "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);
    }
})

=====================组件==================

<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

这是处理 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); 
            

您正在将 JSON（一个结构良好的 object）转换为字符串，然后在其上进行替换。 不要那样做。

你真的不需要做任何你目前正在做的数据操作。 只需从 Apex 返回整个响应正文：

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

并在 JavaScript 中，提取您想要的记录数据：

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

并将您的 Lightning 数据表组件连接到v.records属性，并为记录数据设置适当的列。