Help Javascript(Parsing API infinite scroll)

[kyaalod]

Mga idol ask lang ako ng help na stuck kasi ako dito.

Ang problem ko is niloload nila lang yung same data na unan niyang niload. gumagamit ako ng themoviedb api para iload and mga movies tapos nag try akong gumawa ng infinite scroll at gumawa din ako ng random numbers para sa mag load ng ibat ibang movie.
ito sample ng console.log ko nakaka generate siya ng random number at pag nag refresh naman ako nag lalabas din ng list of random movies pero pag nag scroll down na ako same data lang niloload. sana me makatulong sakin.
[CODE lang="javascript" title="Parsing data"]getMovies().catch(error => {
console.log(error);
}); ;


async function getMovies(){

const response = await fetch(base_URL);
const Moviedata = await response.json();

//console.log(Moviedata.results[0].original_title);

showMovies(Moviedata.results);

//movies = await response.json();
}[/CODE]
[CODE title="show list of movies"]function showMovies(movies){

movieContainer.innerHTML = " ";

movies.forEach((movie) => {
const { poster_path, title, vote_average} = movie;

const img = document.getElementById("poster")
const movieEL = document.createElement("div");

movieEL.classList.add("movies-list");

movieEL.innerHTML =
`<img src="${image_path + poster_path}" alt=${title} id="poster">

<div class="movie-title">
<h3>Title: ${title}</h3>

<span>Ratings: ${parseInt(vote_average.toString().replace('.', ''))}%</span>
</div>
`;

movieEL.addEventListener("click", () =>{
showMovieInfo(movie)// it will pass the movie details
getMovieId(movie.id)//it will pass the movie ID for the trailer
movieInfoContent.style.display = "block";
//console.log(movie.title)

});

movieContainer.appendChild(movieEL);


});
}[/CODE]

 

[PHC_Jayvee]

baka naman iisa lang binabato na movie sayo kaya ayun lang lumalabas

imean

req1 result movie1
req2 result movie 1 parin

 

[kyaalod]

di ko sure sir pero pag nag rereload kasi ako ng page iba ibang movies naman lumalabas. pero pag ginamitan ko naman ng button ganun din ayaw mag bago nung unang nag load na movies

 

[PHC_Jayvee]

[XX='kyaalod, c: 723330, m: 1660593'][/XX] check mo if same lang binibigay sayo na movie

 

[kyaalod]

[XX='PHC_Jayvee, c: 723334, m: 1155000'][/XX] pag yung infinite scroll same data lang niloload niya pero nag gegenerate pa ding ng random numbers doon sa url pero di nag babago yung mga data same pa din

 

[PHC_Jayvee]

[XX='kyaalod, c: 723377, m: 1660593'][/XX] baka hindi mo napasa mga random number

wait lang di ako pro haaaa

 

[kyaalod]

[XX='PHC_Jayvee, c: 723390, m: 1155000'][/XX] napapasa niya sir base sa console log

 

[PHC_Jayvee]

[XX='kyaalod, c: 723406, m: 1660593'][/XX] imean yung na receive mo if same

 

[PHC_Jayvee]

i log mo yung link ng src nila para makita mo if ano vid na receive mo

 

[Deezy]

Palitan mo yung pag declare mo ng variable as "var" instead of "const"

 

[Impostor Syndrome]

Mali kase yung fetching mo kasama dapat sa baseUrl yung query string ng susunod na page or set.

ex:

const baseUrl = "https://api.themoviedb.org/3/movie/popular?api_key=<<api_key>>&language=en-US"

async function fetchMovies(page = 1){

    const response = await fetch(`baseUrl?page=${page}`)
    const result = await res.json()
  
   return result;
}

kaya same na list pa rin yung lumalabas kase hindi na nababago yung page number mo.

 

[kyaalod]

nayos ko na sir. nag add nalang ako ng numbers para mag auto increment twing mag hihit ng bottom page at gumanawa naman na. ang problema ko ngayon is yung search functionality naman ang di nagana




[CODE title="Search"]form.addEventListener('submit', (e)=>{
e.preventDefault();
const searhMovies = search.value;

if(searhMovies == ""){
alert('field is empty')
}else{
searchMovies(searchAPI + searhMovies);
search.value = "";
}
})[/CODE]

ito ang error

movie.js:123 Uncaught TypeError: movies.forEach is not a function
at showMovies (movie.js:123)
at HTMLFormElement.<anonymous> (movie.js:62)

[CODE title="showMOvies"]//Movie
function showMovies(movies){
movies.forEach((movie) => {
const { poster_path, title, vote_average} = movie;

const movieEL = document.createElement("div");
movieEL.classList.add("movies-list");

movieEL.innerHTML =
`<img src="${image_path + poster_path}" alt=${title} id="poster">

<div class="movie-title">
<h3>Title: ${title}</h3>

<span>Ratings: ${parseInt(vote_average.toString().replace('.', ''))}%</span>
</div>
`;

movieEL.addEventListener("click", () =>{
showMovieInfo(movie)// it will pass the movie details
getMovieId(movie.id)//it will pass the movie ID for the trailer
movieInfoContent.style.display = "block";
//console.log(movie.title)

});

movieContainer.appendChild(movieEL);


});
}
[/CODE]

 

[Impostor Syndrome]

[XX='kyaalod, c: 726757, m: 1660593'][/XX]

searchMovies(searchAPI + searhMovies);

query mo pa rin sa loob niyan ang problema. try mo tignan yung response ng query gamit console.log.

 

[kyaalod]

tama yung query sir. nasa console log is yung mismong api na me data. ang problem ata is yung showMovies. gumagana siya pag merong movieContainer.innerHTML = ""; pero ang problema naman is infinite scroll pag meron yung hindi nag stuck yung mga movies ang nangyayari lang is reload.

 

[Impostor Syndrome]

[XX='kyaalod, c: 726820, m: 1660593'][/XX]

ito error mo di ba:

movie.js:123 Uncaught TypeError: movies.forEach is not a function
at showMovies (movie.js:123)
at HTMLFormElement.<anonymous> (movie.js:62)

Hindi array laman ng movies variable mo, hindi iterable ng foreach yung laman. Verify mo anu laman niyan.

 

[kyaalod]

napagana ko na pero yung results nag aautoincrement pa din at niloload yung infinite scroll. dapat pala mag empty yung movieContainer para doon lumabas yung bagong data na binabato ni search.

 

[Impostor Syndrome]

[XX='kyaalod, c: 726841, m: 1660593'][/XX]

Oo dapat ganun nga ang mangyari; Everytime na magsesearch bagong set dapat idisplay na movies at back to page 1. Conflict na ata api mo sa search api at list api. Ang ginagamit mo ata na api sa inifinite scroll mo yung list api lang hindi search api. Pareho may pagination yang dalawa pero magkaiba purpose.

 

[persius11]

nakakamiss mag codes. good ol' days.