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
}
]
}

====================控制器.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(一个可以在代码中轻松处理的结构良好的对象(转换为字符串，然后对其进行替换。不要这样做。

你真的不需要做任何你目前正在做的数据操作。只需从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属性，并为记录数据设置适当的列。