Salesforce Lightning: Fetch data from an external API using Ajax

We will be using a very simple API which takes a GET request formatted as a certain URL, returning some random Chuck Norris jokes...lol, without requiring Apex code. So user will enter a number, and on click of Search button, will make a request to http://api.icndb.com/jokes/random/ API, get the response, parse it and display it on the page.

<aura:application extends="force:slds">

    <aura:attribute name="number" type="Integer" default="5"/>
    <aura:attribute name="html" type="String"/>

    <div class="slds-p-left_large">

        <h2 class="slds-text-heading_large">Chuck Norris Jokes Generator</h2>

        <lightning:input type="number"
                         aura:id="number"
                         label="Enter a number"
                         class="slds-m-around_small slds-size_1-of-8"/>

        <lightning:button variant="brand"
                          label="Get Jokes"
                          class="slds-m-around_medium"
                          onclick="{!c.handleClick }"/>

        <aura:unescapedHtml value="{!v.html}"/>

    </div>

</aura:application>

({
    handleClick : function(component, event, helper) {
        const number = component.find('number').get('v.value');

        if (number) {
            component.set('v.number', number);
            helper.handleAjaxRequest(component, event, helper);
        }

    }
})

({
    handleAjaxRequest : function(component, event, helper) {
        const xhr = new XMLHttpRequest();

        const number = component.get('v.number');

        const url = 'http://api.icndb.com/jokes/random/' + number;

        xhr.open('GET', url, true);

        xhr.onload = function() {
            if(this.status === 200) {
                const response = JSON.parse(this.responseText);

                let output = '<ul class=\'slds-list--dotted\'>';

                if(response.type === 'success') {
                    response.value.forEach(function(joke){
                        output += `<li>${joke.joke}</li>`;
                    });
                }

                output += '<ul>';
                component.set('v.html', output);
            }
        };

        xhr.send();
    }
})

The XHR object has properties and methods associated with it, one of which is open, where we specify type of request we want to make and the URL we want to make it to. The 3rd parameter is set as true as we want to make it asynchronous. The rest of the code is self-explainable.

As a last step, we need to add http://api.icndb.com as a trusted site or else our Lightning component will not be able to make a request and you will notice an error message in console something like this: Refused to connect to 'https://api.icndb.com/jokes/random/6' because it violates the following Content Security Policy directive:....."

So navigate to Setup → CSP Trusted Sites, and add the following entry.

That's it. Enjoy the jokes.

Now authentication is required for a lot of external APIs which are intricate ones using OAuth, and that can get complicated. So just remember that not all APIs give you as much freedom as they do here. You normally have to register your application with their systems and then you will have to authenticate. Different rules, different APIs.

Force.com SOAP API and exposing Apex methods as SOAP Web Services

Before going further, please make sure that the user being used has permission to call API. "API Enabled" must be true for the user's profile.

For SOAP web services API testing, I will be using Postman. This is available as a Chrome extension.

As a first step, you issue a login request where you provide the password and token, as a response to which, you get the session ID and the target URL. To authenticate SOAP API users, you need to acquire session ID.

Enter the below SOAP envelope in your postman's request. Take a note of the POST URL, and the Content-Type that has been set to text/xml. We have also added SOAPAction key in headers whose value is ''.

<?xml version="1.0" encoding="utf-8" ?>
<env:Envelope xmlns:xsd="http://www.w3.org/2001/XMLSchema"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xmlns:env="http://schemas.xmlsoap.org/soap/envelope/">
  <env:Body>
    <n1:login xmlns:n1="urn:enterprise.soap.sforce.com">
      <n1:username>USERNAME</n1:username>
      <n1:password>PASSWORD</n1:password>
    </n1:login>
  </env:Body>
</env:Envelope>

Click on Send button.

We receive a response with status 200 OK. We also get the server URL and the unique session ID.

Now lets query the Account object. Enter the below SOAP envelope in your postman's request. Take a note of the POST URL that we received in our response before.

<?xml version="1.0" encoding="utf-8"?>   
<soapenv:Envelope xmlns:soapenv="http://schemas.xmlsoap.org/soap/envelope/"
   xmlns:urn="urn:enterprise.soap.sforce.com">
  <soapenv:Header>
     <urn:SessionHeader>
        <urn:sessionId>00D1I000001VVPg!ARQAQG3Y4rBp.E79acFggyFeSd8EgnlnhSRB0B4r1UidUhvUr43ulP9MxwX6aKmhQhrnH_fDwEQaB51twKme7tPGn4kFo5Xr</urn:sessionId>
     </urn:SessionHeader>
  </soapenv:Header>
  <soapenv:Body>
     <urn:query>
        <urn:queryString>SELECT Id, Name FROM Account</urn:queryString>
     </urn:query>
  </soapenv:Body>
</soapenv:Envelope>

Lets retrieve server timestamp. Note that I am just changing the SOAP payload.

Lets create an account. Enter the below SOAP envelope in your postman's request.

<?xml version="1.0" encoding="utf-8"?>   
<soapenv:Envelope xmlns:soapenv="http://schemas.xmlsoap.org/soap/envelope/"
  xmlns:urn="urn:enterprise.soap.sforce.com"
  xmlns:urn1="urn:sobject.enterprise.soap.sforce.com"
  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
  <soapenv:Header>
     <urn:SessionHeader>
        <urn:sessionId>00D1I000001VVPg!ARQAQG3Y4rBp.E79acFggyFeSd8EgnlnhSRB0B4r1UidUhvUr43ulP9MxwX6aKmhQhrnH_fDwEQaB51twKme7tPGn4kFo5Xr</urn:sessionId>
     </urn:SessionHeader>
  </soapenv:Header>
  <soapenv:Body>
     <urn:create>
        <urn:sObjects xsi:type="urn1:Account"> <!--Zero or more repetitions:-->
           <!--You may enter ANY elements at this point-->
           <Name>Test Account</Name>
        </urn:sObjects>
     </urn:create>
  </soapenv:Body>
</soapenv:Envelope>

Exposing Apex Methods as SOAP Web Services

Apex class methods can be exposed as custom SOAP Web service calls. Use the webservice keyword to define these methods.

global class MathOperations {
    webservice static Integer getSum (Integer a, Integer b) {
        return a + b;
    }
}

Enter the below SOAP envelope in your postman's request. Take a note of the POST URL