My filter method is not working to extract api data

Based on documentation my filter method should work as written to extract object values that only have the property name ‘qid’. It works for basic examples but for my fetched API data. what could be the problem?

I am trying to extract data values that have the property ‘qid’ into mainData variable, but the mainData variable shows an empty array

i have been entering batman into input box on browser

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')
  console.log('clicked');

  // DATA 
  const url = `https://imdb8.p.rapidapi.com/auto-complete?q=${inputEl.value}`;
  const options = {
  method: 'GET',
  headers: {
    'X-RapidAPI-Key': '4165450571mshe599f8c8e4e26f2p132bb2jsn0e744e67b61b',
    'X-RapidAPI-Host': 'imdb8.p.rapidapi.com'
  }
};

  // FETCH -- YOU HAVE A HARD STOP OF 500 CALLS
  fetch(url, options)
    .then(res => res.json())
    .then((data) => {
      console.log('data: ', data.d);
      
      let mainData = data.d.filter(obj => obj.hasOwnProperty(data.d.qid))
      console.log('mainData:', mainData);

      movieCardBoxEl.innerHTML = data.d.map((title) => {

          return `
            <div class="movie-cards">
              <h2>${title.l}</h2>
              <img class="movie-img" src="${title.i.imageUrl}" 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>Document</title>
</head>
<body>





  
  <header>
    <div>
      <h1>Movies</h1>
    </div>
    <input id="input" type="text">
    <button id="search">Search</button>
  </header>
  
  <section id="movieCardBox">
    <!-- MOVIE CARD RENDERS -->
  </section>





  <script src="test.js"></script>
</body>
</html>

CSS

.movie-cards {
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 1px red solid;
  margin: 10px 0 10px 0;
}

h2 {
  border: 1px solid red; 
}

.movie-title {
  border: 1px solid red; 
}

.movie-img {
  float: left;
  width:  100px;
  height: 100px;
  object-fit: cover;
}

i tried ‘qid’ as well, but no luck

woah wait a second, it works now. thats so weird. I wonder what I did wrong. maybe i had the before filter method with data.d wrong.

I know, thats what i was doing before i tried data.d.qid… I think i had a typo mistake regarding the data.d.filter() that I was trying before i posted. regardless, thank you for the help.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.