There may be a case where we have to represent API responses in tabular format. As we know, API responses are difficult for the end user to read. Hence, it requires framing the API responses in an easily readable format. During my project, I got a similar requirement. Today, I am going to share how this can be done.
We will do this with a sample API of Currency-Rate and the output would come up like this:
Steps to show API response in tabular format:
● Step 1: Register your API in Salesforce.
Go to setup > Home.
Search Remote Site Settings.
Click new > then click on the New Remote Site button.
Enter Remote Site Name: currencyRateData and Remote Site URL: http://api.exchangeratesapi.io
Click on save.
● Step 2 : Create a Wrapper Class: currencyRateWrapper
globalclasscurrencyRateWrapper{
@AuraEnabled
global String Country;
@AuraEnabled
global Decimal Rate;
}● Step 3: Create a class: currencyRateCallout
globalclasscurrencyRateCallout {
@AuraEnabled
globalstatic List<currencyRateWrapper> getCalloutData() {
Http HTTP = new Http();
HttpRequest request = new HttpRequest();
request.setEndpoint(‘callout:exchangeRates/path?format=json’);
request.setMethod('GET');
HttpResponse response = http.send(request);
map<string,object> result =
(map<string,object>)JSON.deserializeUntyped(
response.getBody()
);
map<string,object> countryRateMap =
(map<string,object>)result.get('rates');
List<currencyRateWrapper> countryRate = new
List<currencyRateWrapper>();
for(string currentVar : countryRateMap.keySet()) {
currencyRateWrapper wrapper = new currencyRateWrapper();
wrapper.country = currentVar;
wrapper.rate =(Decimal)countryRateMap.get(currentVar);
countryRate.add(wrapper); }
}
return countryRate;
}
} ● Step 4 : Create an aura component : currencyRate.cmp
To know, how to create an Aura Component, Click Here.
<aura:component implements ='force:appHostable' access='global' controller='currencyRateCallout'>
<aura:handler name = 'init' value = '{!this}' action = '{!c.doInit}'/>
<aura:attribute name = 'calloutResult' type = 'List'/>
<div class="slds-text-heading_large" style = "padding-top: 42px; padding-bottom: 29px;">
{!$Label.c.CURRENCYRATE_PAGE_HEADER}
</div>
<table class="slds-table slds-table_cell-buffer slds-table_bordered" id ="currencyRateTable">
<aura:if isTrue="{!not(empty(v.calloutResult))}">
<thead>
<th>
{!$Label.c.COUNTRY_NAME}
</th>
<th>
{!$Label.c.CURRENCY_RATE}
</th>
</thead>
<tbody>
<aura:iteration items="{!v.calloutResult}" var="currentVar">
<tr>
<td>
{!currentVar.Country}
</td>
<td>
{!currentVar.Rate}
</td>
</tr>
</aura:iteration>
</tbody>
</aura:if>
</table>
</aura:component>● Step 5: In controller: currencyRate.js write the following :
({
doInit : function(component, event, helper) {
var action = component.get('c.getCalloutData');
action.setCallback(this, function(response){
var res = response.getReturnValue();
component.set('v.calloutResult', response.getReturnValue());
});
$A.enqueueAction(action);
}
})● Step 6: Create an Aura app : currencyCalloutData.app
To know, How to create an Aura Component, Click Here.
<aura:application extends="force:slds">
<c:currencyRate/>
</aura:application>● Step 7 : Preview the app.
Note: custom labels used:
{!$Label.c.CURRENCYRATE_PAGE_HEADER} | CURRENCY RATE TABLE |
{!$Label.c.COUNTRY_NAME} | Country |
{!currentVar.Rate} | Rate |
Happy!! To help you add to your knowledge. You can leave a comment to help me understand how the blog helped you. If you need further assistance, please leave a comment or contact us. You can click on "Reach us" on the website and share the issue with me.
Blog Credit:
D. Dewangan
S. Chaudhary
Salesforce Developer
Avenoir Technologies Pvt. Ltd.
Reach us: team@avenoir.ai
Comments