Class Code Snippet :
public class httpCallOutCtrl {
@AuraEnabled public static List < String > getBaseValues() {
List < String > options = new List < String > ();
options.add('AUD');
options.add('BGN');
options.add('BRL');
options.add('CAD');
options.add('CHF');
options.add('CNY');
options.add('CZK');
options.add('DKK');
options.add('EUR');
options.add('GBP');
options.add('HKD');
options.add('HRK');
options.add('HUF');
options.add('IDR');
options.add('ILS');
options.add('INR');
options.add('JPY');
options.add('KRW');
options.add('MXN');
options.add('MYR');
options.add('NOK');
options.add('NZD');
options.add('PHP');
options.add('PLN');
options.add('RON');
options.add('RUB');
options.add('SEK');
options.add('SGD');
options.add('THB');
options.add('TRY');
options.add('ZAR');
List<Account> acct = [select name from account where name != null order by name desc];
for(Account a : acct){
options.add(a.name);
}
return options;
}
@AuraEnabled public static Map < String,Object > getCalloutResponseContents(String url) {
Http h = new Http();
HttpRequest req = new HttpRequest();
req.setEndpoint(url);
req.setMethod('GET');
HttpResponse res = h.send(req);
System.debug('response:--> ' + res.getBody());
Map < String, Object > resultsMap = (Map < String, Object > ) JSON.deserializeUntyped(res.getBody());
system.debug('resultsMap-->' + resultsMap);
return resultsMap;
}
}
Aura App :
<aura:application extends="force:slds">
<ltng:require styles="/resource/slds202/assets/styles/salesforce-lightning-design-system.css"/>
<c:SampleComponent/>
</aura:application>
Component :
<aura:component controller="httpCallOutCtrl">
<aura:attribute name="response" type="Map" />
<aura:attribute name="ListOfCurrency" type="String[]" />
<aura:handler name="init" value="{!this}" action="{!c.doInit}" />
<div class="slds-m-around--medium">
<!--Header part-->
<div class="slds-page-header" role="banner">
<div class="slds-media__body">
<p class="slds-page-header__title slds-truncate" title="foreign exchange rates">HTTP Callout Exchange Rates</p><br/><br/>
<div class="slds-form-element">
<div class="slds-form-element__control">
<div class="slds-select_container">
<ui:inputSelect label="Select Industry " class="dynamic" aura:id="InputAccountIndustry" change="{!c.onPicklistChange}" />
</div>
</div>
</div>
</div>
</div>
<!--Header part close-->
<h3 class="slds-section-title--divider"> Base : {!v.response.base}</h3>
<h3 class="slds-section-title--divider"> Date : {!v.response.date}</h3>
<!--iterate the list of Currency-->
<ul class="slds-list--dotted">
<aura:iteration items="{!v.ListOfCurrency}" var="rateLst">
<li>{!rateLst}</li>
</aura:iteration>
</ul>
</div>
</aura:component>
ControllerJS :
({
doInit: function(component, event, helper) {
var action = component.get("c.getBaseValues");
var inputIndustry = component.find("InputAccountIndustry");
var opts = [];
action.setCallback(this, function(a) {
opts.push({
class: "optionClass",
label: "--- None ---",
value: ""
});
for (var i = 0; i < a.getReturnValue().length; i++) {
opts.push({
"class": "optionClass",
label: a.getReturnValue()[i],
value: a.getReturnValue()[i]
});
}
inputIndustry.set("v.options", opts);
});
$A.enqueueAction(action);
},
calloutCtrl: function(component, event, helper) {
var base = 'USD';
console.log(base);
helper.getResponse(component, base);
},
onSingleSelectChange: function(cmp) {
var selectCmp = cmp.find("InputSelectSingle");
var resultCmp = cmp.find("singleResult");
resultCmp.set("v.value", selectCmp.get("v.value"));
},
onPicklistChange: function(component, event, helper) {
var selectedIndustry = component.find("InputAccountIndustry");
var base = selectedIndustry.get("v.value");
console.log(base);
if(base === "--- None ---"){
alert("Please select valid option");
}else{
helper.getResponse(component, base);
}
},
});
HelperJs :
({
getResponse: function(component, base) {
var action = component.get("c.getCalloutResponseContents");
action.setParams({
"url": 'http://api.fixer.io/latest?base=' + base
});
action.setCallback(this, function(response) {
var state = response.getState();
console.log(state);
console.log(response.getReturnValue());
if (component.isValid() && state === "SUCCESS") {
component.set("v.response", response.getReturnValue());
var getAllRates = component.get("v.response")['rates'];
var CurrencyList = [];
for (var key in getAllRates) {
CurrencyList.push(key + ' = ' + getAllRates[key]);
}
component.set("v.ListOfCurrency", CurrencyList);
}
});
$A.enqueueAction(action);
},
})
Output :
