LWC | HTTP Callouts from Client-Side Controller

In this post I am going to demonstrate how to make HTTP callouts from LWC (Lightning Web Components) from Client-Side controller (Javascript).

We can do callouts from Lightning Web Component in two ways:
1. Client-side controller(JS controller) - Discussed in this Post
2. Using the server-side controller(Apex Class)

HTTP Callouts from LWC using Fetch in Javascript

To make callouts from Javascript we will use the fetch method. If you are not familiar with fetch method, please checkout this link to understand it better. https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch

I will be using a Free API for Online Movie Database: https://www.omdbapi.com/
Please visit this site and get your own free API key.

We will design a Movie Database/Ratings Application.Do checkout my previous post for the live demo and to play with and test this app yourself. https://accidentalcoder.blogspot.com/2020/06/callouts-from-lwc.html

So let's dive into how to actually create this App in less than 30 minutes.

1. Add Endpoint URL to CSP Trusted Sites List
The very first thing that we need to do when we need to make HTTP callouts from Javascript(Client-side) is to add the EndPoint URL in CSP trusted site settings in Salesforce. If we do not complete this step, Salesforce won't allow us to make a callout from client-side controller (Javascript).
Note: If we were doing Server -Side HTTP callouts, we had to create Remote Site Setting for the same.
In our case the Endpoint URL is : https://www.omdbapi.com. We just need to add this in the CSP Trusted site list. Check the screenshots below:

Note: Added the https://*.www.omdbapi.com/ because it will whitelist all the different pages for this endpoint. For safer side create one more CSP Trusted site record for https://www.omdbapi.com also. 

2. Sample JSON Response and Query String
Now we need to understand, how will the Query String look like and what will be the sample JSON response.
In our case, the Query String Looks like : https://www.omdbapi.com/?t=moviename&apikey=apikey (Checkout the API website (https://www.omdbapi.com) for documentation and details)
Breaking it down:
  1. https://www.omdbapi.com/: This is the main URL.
  2. t : This is the parameter which accepts the movie/series name.
  3. apikey: This is your API key
An example URL will look like this : https://www.omdbapi.com/?t=avengers&apikey=aacdb714

Sample JSON response looks like this:

 {

  Title: 'The Avengers',

  Year: '2012',

  Rated: 'PG-13',

  Released: '04 May 2012',

  Runtime: '143 min',

  Genre: 'Action, Adventure, Sci-Fi',

  Director: 'Joss Whedon',

  Writer: 'Joss Whedon (screenplay), Zak Penn (story), Joss Whedon (story)',

  Actors: 'Robert Downey Jr., Chris Evans, Mark Ruffalo, Chris Hemsworth',

  Plot: 'Earth\'s mightiest heroes must come together and learn to fight as a team if they are 

  going to stop the mischievous Loki and his alien army from enslaving humanity.',

  Language: 'English, Russian, Hindi',

  Country: 'USA',

  Awards: 'Nominated for 1 Oscar. Another 38 wins & 79 nominations.',

  Poster: 'https://m.media- 

 amazon.com/images/M/MV5BNDYxNjQyMjAtNTdiOS00NGYwLWFmNTAtNThmYjU5ZGI2 

 YTI1XkEyXkFqcGdeQXVyMTMxODk2OTU@._V1_SX300.jpg',

  Ratings: [

    {

      Source: 'Internet Movie Database',

      Value: '8.0/10'

    },

    {

      Source: 'Rotten Tomatoes',

      Value: '92%'

    },

    {

      Source: 'Metacritic',

      Value: '69/100'

    }

  ],

  Metascore: '69',

  imdbRating: '8.0',

  imdbVotes: '1,230,825',

  imdbID: 'tt0848228',

  Type: 'movie',

  DVD: 'N/A',

  BoxOffice: 'N/A',

  Production: 'N/A',

  Website: 'N/A',

  Response: 'True'

}

We are receiving a lot of information from the JSON response. We can choose which info to use in our html/screen. Based on the response data, we can design our html file and show the fields which we want.

Note : In HTML file, I have used Progress Rings (to show the Ratings Score). Check Code for more details.

3. Here's the code:

movieRating.html

movieRating.js

movieRating.css

movieRating.js-meta.xml

And we are done!

Just add this code anywhere,home page/community to start playing with it.

And since we are on this topic, I would like to recommend some great online content that I liked and watched recently. I Highly recommend these:

Fauda(Netflix-series), Paatal-lok (Amazon-Series), Fargo(Netflix-series),When They See Us (Netflix-series). These are all must watch if Binge Watching is your thing!

Please visit my previous post to test this Application yourself and play with it here: https://accidentalcoder.blogspot.com/2020/06/callouts-from-lwc.html

Enjoy! Please share feedback, suggestions or maybe what to Watch next!

BEST ONLINE SALESFORCE COURSES - START LEARNING TODAY!

• Flows - Become Flow Expert


• Get Salesforce PD 1 Certified


• Salesforce Development - Beginners

If you like reading my content, Subscribe to my Upcoming YOUTUBE Channel here: https://www.youtube.com/channel/UCdfi8Sq7iOcxnFhsgulWHeg/videos?view=0&sort=p&flow=grid

Don't Miss Latest Posts :  CLICK HERE TO SUBSCRIBE TO THIS BLOG

Checkout All Flow Examples on this Blog: All Flow Examples

Checkout Other Posts:

LWC POSTS FLOW POSTS ALL POSTS