top of page
Writer's pictureN. Mehra

How to Display API Response in Table Using LWC Component

Updated: Nov 8, 2023


Display API Response in Table Using LWC Component


We come across using API integrations frequently but, reading responses becomes a bit apprehensive. So, how can we resolve it to get data in a format that is easily readable? We can fulfill our requirement by building an LWC component to represent API response in a tabular format.


We will use the API of Currency-Rate and our output will 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.



Step 2 : Create a Wrapper Class: currencyRateWrapper

global class currencyRateWrapper{
   @AuraEnabled
        global String Country;
   @AuraEnabled
        global Decimal Rate;
}

Step 3 : How to Create a class : currencyRateCallout

global class currencyRateCallout {
    @AuraEnabled(cacheable=true)
    global static 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: How to create an LWC component: currencyRate.html

To know, how to create an LWC Component, Click Here.

<template>
    <div class="slds-text-heading_large" style = "padding-top: 42px; padding-bottom: 29px;">
        {label.CURRENCYRATE_PAGE_HEADER}
    </div>
   <div if:true= {callout.data}>
      <table class="slds-table slds-table_cell-buffer slds-table_bordered">
            <thead>
                  <th>{label.COUNTRY_NAME}</th>
                  <th>{label.CURRENCY_RATE}</th>
            </thead>
            <tbody>
                  <template for:each={callout.data} for:item="item">
                     <tr key ={item.id}>
                         <td>{item.Country}</td>
                         <td>{item.Rate}</td>
                     </tr>
                  </template>
            </tbody>
      </table>
   </div>
</template>

Step 5 : In controller: currencyRate.js write the following :

import { LightningElement,wire } from 'lwc';
import CURRENCYRATE_PAGE_HEADER from '@salesforce/label/c.CURRENCYRATE_PAGE_HEADER';
import COUNTRY_NAME from '@salesforce/label/c.COUNTRY_NAME';
import CURRENCY_RATE from '@salesforce/label/c.CURRENCY_RATE';
import getCallout from '@salesforce/apex/currencyRateCallout.getCalloutData';

export default class currencyRate extends LightningElement {
   ready= false;
   label = {
        CURRENCYRATE_PAGE_HEADER,
        COUNTRY_NAME,
        CURRENCY_RATE,
   };
   @wire (getCallout) callout;
}

Step 6 : Update the xml file : currencyRate.xml

<?xml version="1.0"   encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>55.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__AppPage</target>
        <target>lightning__HomePage</target>
        <target>lightning__RecordPage</target>
    </targets>
</LightningComponentBundle>

Step 7 : Preview the app.



● Note: custom labels used:

{Label.CURRENCYRATE_PAGE_HEADER}

CURRENCY RATE TABLE

{Label.COUNTRY_NAME}

​Country

{Label.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:

N. Mehra

Salesforce Developer

Avenoir Technologies Pvt. Ltd.



Reach us: team@avenoir.ai

Comments


bottom of page