Hi I am facing an issue while creating an Movie search app using the APIs.

1.⭐ https://m.media-amazon.com

  2.⭐ https://www.omdbapi.com

import { LightningElement } from 'lwc';

const DELAY=300;

export default class MovieSearch extends LightningElement {

    selectedType="";

    selectedsearch="";

    loading=false;

    selectedPageNo="1";

    delayTimeout;//to store the timeout delay

    // search filter for movies .....

    get typeoptions(){

        return[

        {label:"None",value: ""},

        {label:"Movie",value: "movie"},

        {label:"Series",value: "series"},

        {label:"Episode",value: "episode"}

    ];

    }

//here we are destructuring the values....

    handleChange(event)

    {

        let {name,value}=event.target;

        this.loading=true;

        if(name ==="type")

        {

            this.selectedType=value;

        }

        else if(name ==="search")

        {

          this.selectedsearch=value;

        }

        else if(name==="pageno")

        {

            this.selectedPageNo=value;

        }

        //debouncing process--> where we can delay the execution process for sometime that we want...

        clearTimeout(this.delayTimeout)// this will clears the existing timeout...

        this.delayTimeout =setTimeout(()=>{

           this.searchMovies();

        },DELAY);//always define the constants in Capital letters as a best practice.....

    }

//this method will search for the entered movies

// here we need to use the fetch method.

// Fetch method always returns the promise .

//to handle the promise we need to uise asyn and await.

   async searchMovies()

      {

        //how to put the url..

        // http://www.omdbapi.com/?i=tt3896198&apikey=ac0b1a0e

        //const URL='https://www.omdbapi.com/?s=${enteredValue}&type=${this.selectedType}&page=${this.pageNumber}&apikey=ddb0ceaa'---> Api key we need to enter from our mail;

        const url=`https://www.omdbapi.com/?s=${this.selectedsearch}&type=${this.selectedType}&page=${this.selectedPageNo}&apikey=ddb0ceaa`;// by using that url we are making API call

        const res=await fetch(url);//here we are calling the API

        const data=await res.json();//herte we atre storing the response in the property of a data by using the json.

        console.log("Movies Search Output",data);

      }

}

HTML:

<template>

   <!--Filter Section for the movies--> 

  <div>

<lightning-layout horizontal-align="center">

    <lightning-layout-item 

    padding="around-small"

    size="3">

    <!--Filter Section==> for the  type of movies(movie,series,episode)-->

    <lightning-combobox

            name="type"

            label="Type"

            value={selectedType}

           placeholder="Select Type"

            options={typeoptions}

            onchange={handleChange} ></lightning-combobox>

 </lightning-layout-item>

    <lightning-layout-item 

    padding="around-small" 

    size="7">

    <!--Filter Section{ by using the name we can search here }-->

    <lightning-input

            name="enter-search"

            label="Enter Search Item"

            placeholder="Search for Movie/Series"

            type="search"

            is-loading={loading}

            onchange={handleChange}

        ></lightning-input>

    </lightning-layout-item>

  <!--PAge Number Code-->

    <lightning-layout-item 

    padding="around-small" 

    size="2">

    <lightning-input 

    type="number" 

    name="pageno" 

    label="Page"

    onchange={handleChange}

    value={selectedPageNo}

    field-level-help="Range 1-100"

    min="1"

    max="100"

    step="1" 

    message-when-range-underflow="Minimum value is 1"

    message-when-range-overflow="Maximum value is 1">

    </lightning-input>

    </lightning-layout-item>

</lightning-layout>

  </div>

   <!--Display Section-->

   <div>

   </div>

</template> #Salesforce Developer #Lightning Web Components #Lightning Experience #Integration #Salesforce Developer #LWC