I think there is a mistake in my js code but I cannot find it.
I am attaching my js code here.
@santanusingh018 Append &t= in API_URL and &i= in API_URL_SEARCH.
const API_URL="http://www.omdbapi.com/?apikey=[yourkey]&t="
const API_URL_SEARCH = "http://www.omdbapi.com/?apikey=[yourkey]&i="
I had made the changes but still I cannot get the search result on chrome.
Hi @santanusingh018,
In the above lines, have you replaced [yourkey] with your API key?
Also since you have shared your API key on the forum, please re-generate it.
@raghav.srivastava yes, I had made the changes that you suggested but I am not getting the desired results.
In the console, it shows something like this:
‘Uncaught (in promise) TypeError: Cannot read properties of undefined (reading ‘forEach’)
at showMovies (movie_finder.js:24:9)
at getMovies (movie_finder.js:19:2)’.
Hi @santanusingh018 ,
Kindly use Array.from() to convert the HTML collection into array. Please see the code below
//make the changes on line #24
Array.from(movies).forEach(async ........
@raghav.srivastava I had made the changes but it is still showing some error.
Console shows:
“Uncaught (in promise) TypeError: undefined is not iterable (cannot read property Symbol(Symbol.iterator))
at Function.from ()
at showMovies (movie_finder.js:24:8)
at getMovies (movie_finder.js:19:2)”
Hi @santanusingh018 ,
Make the following changes,
Change &t= to &s=
const API_URL="http://www.omdbapi.com/?apikey=[yourkey]&s="
Also,you may remove Arrays.from()
It should work
1 Like
@raghav.srivastava yes now after changing the api, I am getting the results. Thank you for your help.
1 Like
@Nidhi26Singh08 Please open the developer tools, go to the network tab, reload the page and share a screenshot.
My html code
Movie Finder <div class="title">Movie Finder</div>
<div class="search-box">
<input type="text" placeholder="Search" class="form-input" id="search-input">
<button class="search">Search</button>
</div>
</div>
<div class="movie-cards"></div>
<script src="../javascript/movie_finder.js"></script>
</body>
My CSS code
body{
box-sizing: border-box;
margin:0;
padding:0;
font-size:18px;
font-family:‘Lucida Sans’,‘Lucida Sans Regular’,‘Lucida Grande’,‘Lucida Sans Unicode’,Geneva,Verdana,sans-serif;
background-color: rgb(233,233,233);
}
.title{
font-size: 30px;
font-weight: 600;
color:white;
background-color:rgb(19,19,56);
width:100%;
padding:20px;
text-align: center;
}
.full_body{
display:flex;
justify-content: center;
align-items: center;
flex-direction:column;
}
.form-input{
border:none;
outline:none;
background-color:white;
padding:10px 20px;
border: 1px solid grey;
margin-right: 20px;
}
.form-input:focus{
background-color: white;
}
.search{
border:none;
outline:none;
background-color:blue;
font-family:‘Lucida Sans’,‘Lucida Sans Regular’,‘Lucida Grande’,‘Lucida Sans Unicode’,Geneva,Verdana,sans-serif;
padding:10px 20px;
color: white;
}
.search-box{
display: flex;
justify-content: center;
align-items: center;
margin:100px;
}
.movie-cards{
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.card{
display: flex;
justify-content: space-between;
align-items: center;
color:white;
background-color: rgb(24,51,59);
margin:20px;
padding:30px;
width:700px;
}
.movie-title{
display: flex;
justify-content: space-between;
align-items: center;
width:300px;
padding:0px 200px;
}
.value{
font-size: 15px;
width:200px;
}
My JAVASCRIPT code
const API_URL =" http://www.omdbapi.com/?i=tt3896198&apikey=2b813b40&s=";
const API_URL_SEARCH = " http://www.omdbapi.com/?apikey=2b813b40&i=";
var search_input =document.getElementsById(“search-input”);
var card =document.getElementByClassName(“movie-cards”)[0];
document.getElementsByClassName(“search”)[0].addEventListener(“click”,function(){
console.log(search_input.value);
const query = search_input.value;
if(query){
getMovies(API_URL+query);
}
});
async function getMovies(url){
const resp = await fetch(url);
const respData = await resp.json();
console.log(respData);
showMovies(respData.Search);
}
function showMovies(Movies){
card.innerHTML="";
movies.forEach(async function(movie){
const movieDATA = await fetch(API_URL_SEARCH+movie.imdbID);
const movieDataobj = await movieDATA.json();
movie_display(movieDataobj);
});
}
function movie_display(imovie){
const movieElm = document.createElement(“div”);
movieElm.classList.add(“movie-card”);
movieElm.innerhtml=’
Title${imovie.Title}
Rating${imovie.imdbRating}
Director${imovie.Director}
Released${imovie.Released}
Genre${imovie.Genre}
@Nidhi26Singh08 there is a difference between single quote (') and backtick (`).
On line number 31 in your javascript,
movieElm.innerhtml=`//changed to ` from '
Poster
Title${imovie.Title} Rating${imovie.imdbRating} Director${imovie.Director} Released${imovie.Released} Genre${imovie.Genre}
`;//changed to ` from '
For multiline strings in javascript, we use backticks,not single quotation mark.
