API Call in LWC | https://accidentalcoder.blogspot.com/2020/06/lwc-callouts-client-side.html

movieRating.html

<template>
    <div class="slds-grid slds-wrap">
        <div class="slds-col slds-size_1-of-2">
            <span>
                <lightning-card title="What do you want to Watch?">
                    <img
                        src="https://s.studiobinder.com/wp-content/uploads/2019/06/Best-M-Night-Shyamalan-Movies-and-Directing-Style-StudioBinder.jpg" />
                    <p class="slds-p-horizontal_small"></p>
                    <div class="Search">
                        <lightning-input value={movieStr} onchange={moviename} label="Search Online Database" placeholder="Movie or Series Name....">
                        </lightning-input>
                    </div>
                    <p></p>
                    <p slot="footer">
                        <lightning-button label="Search" onclick={getvalues}>
                        </lightning-button>
                    </p>
                </lightning-card>
            </span>
        </div>
        <div class="slds-col slds-size_1-of-2">
            <span>
                <template if:true={datafound}>
                    <lightning-card title="">
                        <p></p>
                        <h1>{showval.Title}<br /></h1>
                        <div class="card">Year: {showval.Year}<br /></div>
                        <div class="card">Genre: {showval.Genre}<br /></div>
                        <div class="card">Languages: {showval.Language}</div>
                        <div class="card">Awards: {showval.Awards}</div>
                        <div class="card">Writer:{showval.Writer}</div>
                        <div class="card">Actors: {showval.Actors}<br /></div>
                        <div class="card">Plot: {showval.Plot}<br /></div>
                        <div class="card rating">Ratings:</div>
                        <template for:each={showval.Ratings} for:item="rec" for:index="index">
                            <p key={rec.Source}></p>
                            <div key={rec.Source} class="card">
                                {rec.Source}: {rec.Value}
                                <lightning-progress-ring key={rec.Source} value={rec.newValue} size="large">
                                </lightning-progress-ring>
                            </div>
                        </template>
                        <template if:true={backupimg}>
                            <img
                                src="https://s.studiobinder.com/wp-content/uploads/2019/06/Best-M-Night-Shyamalan-Movies-and-Directing-Style-StudioBinder.jpg" />
                        </template>
                        <template if:false={backupimg}><img src={showval.Poster} /></template>
                    </lightning-card>
                </template>
                <template if:true={nodata}>
                    <lightning-card title="Movie Not Found. Please Check Spelling"></lightning-card>
                </template>
            </span>
        </div>
    </div>
</template>
@mhamzas
 

movieRating.js

import {
    LightningElement
} from "lwc";

const QUERY_URL = "https://www.omdbapi.com/?t="; 
const QUERY_URL_2 = "&apikey=aacdb714";           //The client key for the API.
export default class App extends LightningElement {
    
    showval;
    backupimg;
    datafound;
    nodata;
    urltocall;  

    //Making Callout using fetch. Learn more about fetch using the link provided in post
    getvalues() {
        fetch(this.urltocall)
            .then((response) => {
                if (!response.ok) {
                    this.error = response;
                }
                return response.json();
            })
            .then((jsonResponse) => {
                this.datafound = true;
                this.nodata = false;
                this.showval = jsonResponse;
                this.backupimg = false;

                if (JSON.stringify(this.showval).includes("Error")) {
                    this.datafound = false;
                    this.nodata = true;
                }
                if (this.showval.Poster.includes("N/A")) {
                    this.backupimg = true;
                }
                /*In order to show Progress Rings which accept number values (1-100),
                I am converting the JSON response for Ratings into usable format for rings.
                Check the JSON response Sample for more clarity*/
                for (var i = 0; i < this.showval.Ratings.length; i++) {
                    if (this.showval.Ratings[i].Source.includes("Internet")) {
                        let imdb = this.showval.Ratings[i].Value.split("/");
                        this.showval.Ratings[i].newValue = imdb[0] * 10;
                    }
                    if (this.showval.Ratings[i].Source.includes("Metacritic")) {
                        let imdb = this.showval.Ratings[i].Value.split("/");
                        this.showval.Ratings[i].newValue = imdb[0];
                    }
                    if (this.showval.Ratings[i].Source.includes("Rotten")) {
                        let imdb = this.showval.Ratings[i].Value.split("%");
                        this.showval.Ratings[i].newValue = imdb[0];
                    }
                }
            })
            .catch((error) => {
                this.error = error;
            });
    }
    //Fetching the user input and creating the HTTP callout URL as required by the API endpoint
    moviename(event) {
        let movieStr = event.target.value;
        let finalurl = QUERY_URL + movieStr + QUERY_URL_2;
        this.urltocall = finalurl;
    }
}
@mhamzas
 

movieRating.js-meta.xml

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