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;
}