I am trying to filter out object values into a variable that do not have values of ‘null’ within the ‘releaseYear’ property because I only want movies listed on the page that have a year to go along with the title and image. What am I doing wrong?
JS
// VARIABLE LIBRARY
let searchEl = document.querySelector('#search')
let movieCardBoxEl = document.querySelector('#movieCardBox')
// moviecard.setAttrbiute style and add borders and stuff
let movieCardEl = document.querySelector('#movieCard')
let movieTitleEl = document.querySelector('#movieTitle')
// SEARCH FLICK
searchEl.addEventListener('click', () => {
let inputEl = document.querySelector('#input')
const url = `https://moviesdatabase.p.rapidapi.com/titles/search/keyword/${inputEl.value}?info=base_info`;
const options = {
method: 'GET',
headers: {
'X-RapidAPI-Key': '4165450571mshe599f8c8e4e26f2p132bb2jsn0e744e67b61b',
'X-RapidAPI-Host': 'moviesdatabase.p.rapidapi.com'
}
};
fetch(url, options)
.then(res => res.json())
.then(data => {
console.log('data: ', data);
let movieData = data.results.filter(obj => {
for (let key in obj) {
if (obj[key].releaseYear === null) {
return false
} else {
return true
}
}
})
console.log('movieData: ', movieData);
// mapping over movies array to render movie titles as cards
movieCardBoxEl.innerHTML = movieData.map((movie) => {
console.log(movie)
return `
<div class="movie-cards">
<h2>${movie.titleText.text}</h2>
<p>${movie?.releaseYear?.year || ""}</p>
<img class="movie-img" src="${movie?.primaryImage?.url || ""}" alt="" srcset="">
</div>
`
}).join('')
})
.catch(err => console.error('error:' + err));
})
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Movies</title>
</head>
<body>
<header>
<div>
<h1>Movies</h1>
</div>
<div class="search-input-box">
<input id="input" type="text">
<button id="search">Search</button>
</div>
</header>
<section id="movieCardBox" class="movie-card-box">
<!-- MOVIE CARD RENDERS -->
</section>
<script src="app.js"></script>
</body>
</html>
CSS
header {
display: flex;
justify-content: space-between;
border: 1px red solid;
}
header h1 {
margin: 0;
}
header input {
margin: 0 10px 0 0;
}
header .search-input-box {
display: flex;
align-items: center;
/* border: 1px red solid; */
}
.movie-card-box {
display: flex;
flex-direction: row;
flex-wrap: wrap;
border: 1px red solid;
margin: 20px 0 0 0;
padding: 10px;
}
.movie-cards {
display: flex;
flex-direction: column;
align-items: center;
border: 1px red solid;
width: 200px;
margin: 5px 0 5px 0;
}
h2 {
border: 1px solid red;
margin: 10px 10px 0 10px;
text-align: center;
}
.movie-title {
border: 1px solid red;
}
.movie-img {
float: left;
width: 150px;
height: 200px;
margin: 0 0 10px 0;
object-fit: cover;
}
. I’ll look back at the object when I have more time. But maybe the obj.releaseYear only exists if there is a obj.releaseYear.year inside of it. Happy to help