.filter() method to extract data that doesn't have null

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?


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')

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) => {
        return `
          <div class="movie-cards">
            <p>${movie?.releaseYear?.year || ""}</p>
            <img class="movie-img" src="${movie?.primaryImage?.url || ""}" alt="" srcset="">

    .catch(err => console.error('error:' + err));


<!DOCTYPE html>
<html lang="en">
  <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">

    <div class="search-input-box">
      <input id="input" type="text">
      <button id="search">Search</button>
  <section id="movieCardBox" class="movie-card-box">

  <script src="app.js"></script>


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 believe that this is not working bc the releaseYear is not a property of each object; it is nested within the releaseInfo property. In your obj you need to specify the releaseYear inside of releaseInfo. Consider using obj.releaseInfo.releaseYear in your filer function. I hope this helps

Hmmm i dont see a releaseInfo property when searching a movie.

Note: i have been typing in batman if that helps

Ok I looked into this further. If you console log the obj you can see that year is embedded in releaseYear. Also the key is returning the id but this doesn’t help.

They don’t want us providing full answers here. but a hint is instead of using an if…else statement, we can simply return a boolean expression that checks whether obj.releaseYear.year is not null.

You would want to check for null against obj.realseYear && obj.releaseYear.year

I hope that helps you

Im not sure I follow. out of curiosity is it working for you when you render movies in the browser using your method? still not working for me.

1 Like

Yes it did work. I believe it did what you want. As I recall, it filtered (example) 10 batman movies to 8 bc took ut null years. I erased from my browser. Give me a moment and I’ll try to look back…

Hi @ deboer753 . Ok I looked back. Instead of your if statement, try this code. I believe this is what worked for me

let movieData = data.results.filter(obj => {
  return obj.releaseYear !== null && obj.releaseYear.year !== null

Like you were trying in the if statement, the filter method expects a boolean returned. In the statement I wrote above, you are feeding the obj into the callback. The callback compares obj.releaseYear to null and also obj.releaseYear.year to null. This is bc in the object, the year is in a “sub-object” nested inside of releaseYear.

I hope this helps. Please let me know if it works for you :upside_down_face:

Yes, this worked thank you Lance.

So just to clarify: What i was doing originally as an if statement was correct, but it i was missing the ‘releaseYear.year’ notation? just FYI, I used your method and then took out the releaseYear.year to see if it still works and it does. This confuses me as your method (and without the ‘&& releaseYear.year’) seems identical to my original method. Does that puzzle you as well?

1 Like

You are welcome. You definitely had the right idea. The statement i wrote is just how im used to writing with filter method. And, yes, that confuses me too :rofl:. 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

1 Like

it might depend on the movie being searched perhaps? im not sure! but thanks again Lance. Hope to see you again in the FCC threads as I am really enjoying using this forum. Cheers!

Lance, on another note i am curious if you knwo what I should be looking into here to filter out objects that dont have an image as well. This of course would be the same method as you helped me with, but in the console logged data you can see that a movie that has an image is attched with a url in the console and also a movie without an image also has an image url in the console.

if you were to copy and paste the url for the image url with no image in the browser into the search bar url (not the one i built) it will bring you to a page that says “not found”. Do you know what I should be looking into in order to use a method to detect the text of the url that brings me to a page that says ‘not found’?

1 Like

Hi there. Let me play with this a bit. Im on my phone right now and its had to view the object. I’ll get back to you on it. Im sure we can figure it out :upside_down_face: