HTTP callout

How to Make HTTP Callout from Lightning component

Lightning Component

Sharing is caring!

Prerequisites : Basic understanding of Lightning Components.
HTTP Callout : Brief Summary

HTTP Callout enables us to firmly integrate our Apex code with an external web service/API. By The Callout we send an HTTP request from our apex class code, and then receives the response from external web service.
HTTP callouts can be used with any HTTP service, either SOAP or REST.

In this example we will create a lightning component. by this component we make a HTTP callout and send a GET request(Retrieve data identified by a URL) to a web service to get the foreign exchange rates. The foreign exchange rates service sends the response in JSON format. and then we display the response data on our lightning component.

For foreign exchange rates reference: http://fixer.io/

Before you run the example in this Post, you’ll need to Authorize the endpoint URL of the Callout :
http://api.fixer.io

Step 1 :  Authorize the endpoint URL For Apex Callout.

For Authorize the endpoint URL -:

  •  From Setup, enter Remote Site Settings in the Quick Find box
  • Click on the Remote Site Settings.
  •  Click New Remote Site.
  • For the remote site name, enter foreign_exchange_rates .
  • For the remote site URL, enter http://api.fixer.io  ,This URL authorizes all subfolders for the endpoint, like http://api.fixer.io/latest
  • Make sure your Active checkbox is Equal to True.
  • Click Save.

HTTP callout

Fixer.io is a free JSON API for current and historical foreign exchange rates published by the European Central Bank.

The rates are updated daily around 4PM CET.

Here is the snapshot of Response  (JSON format), who coming from web service callout (http://api.fixer.io) in This Example..

 

HTTP callout from lightning component

Step 2 :  Create Apex Class For Make HTTP Callouts.

Apex class [httpCallOutCtrl.apxc]

    • In above apex class controller we have a getCalloutResponseContents @AuraEnabled class method with one parameter url as string type. And the Return type is Map type where String is key and object as value of the Map.
    • In getCalloutResponseContents Method ,first we created a new HTTP object. and set the EndPoint url with url parameter.
    • In the url parameter we set url from lightning component js controller.
    • and when the HttpResponse come from callout, Deserialize the JSON string into the Map collection and return the map.

 

Step 3 :  Create Lightning Component

Component [SampleComponent.cmp]

  • In above Lightning component we are use two aura:attribute one is type of map and one is type of array of String

For How to use Map in lightning component : Click here…

JS controller [sampleComponentController.js]

  • In js controller we set ‘USD’  as base parameter. and pass it to JS helper function.

JS Helper [sampleComponentHelper.js]

Lightning App [TestApp.app]

Output -:

HTTP callout from lightning component

Like our facebook page for new post updates.? & Don’t forget to bookmark this site for your future reference.

if you have any suggestions or issue with it, you can post in comment box. 🙂

Sharing is caring!

(Visited 4,136 times, 16 visits today)

7 comments

Leave a Reply