I’m displaying the movie data that I’ve brought in open api in card format. I’d like to newly arrange them in the order of title a-z and highest stars in drop-down format. However, it does not work when I select another item after the initial card is loaded I thought it was a problem with the function, so I used console.log, but the function works fine.
Uncaught ReferenceError: handleSortChange is not defined
The error at HTMLSelectElement.onchangeappears And alsosort.js:50 TypeError: Cannot read properties of undefined (reading ‘slice’)
at sortByTitle (sort.js:4:17)
at handleSortChange
I put <script src="./src/sort.js" type="module"></script> in the header of index.html because it said it had to be loaded before the script was executed
sort.js
import { callGetMoviesAPI, displayMovieData } from "./movieAPI.js";
const sortByTitle = (movies) => {
return movies.slice().sort((a, b) => {
const titleA = a.title.toUpperCase();
const titleB = b.title.toUpperCase();
if (titleA < titleB) {
return -1;
}
if (titleA > titleB) {
return 1;
}
return 0;
});
};
const sortByRating = (movies) => {
return movies.slice().sort((a, b) => b.vote_average - a.vote_average);
};
const movies = [
{ title: "B", vote_average: 8.5 },
{ title: "A", vote_average: 7.9 },
{ title: "C", vote_average: 9.2 }
];
console.log("Sorted by title:", sortByTitle(movies));
console.log("Sorted by rating:", sortByRating(movies));
const handleSortChange = async (value) => {
try {
const movies = await callGetMoviesAPI();
console.log("Movies from callGetMoviesAPI:", movies); // Movies from callGetMoviesAPI: undefined
switch (value) {
case "default":
displayMovieData(movies);
break;
case "title":
const sortedMoviesByTitle = sortByTitle(movies);
displayMovieData(sortedMoviesByTitle);
break;
case "rating":
const sortedMoviesByRating = sortByRating(movies);
displayMovieData(sortedMoviesByRating);
break;
default:
displayMovieData(movies);
}
} catch (err) {
console.error(err);
}
};
export { handleSortChange };
main.js
import { handleSortChange } from "./sort.js";
import { callGetMoviesAPI, displayMovieData } from "./movieAPI.js";
import { search_movie } from "./search.js";
const urlParams = new URLSearchParams(window.location.search);
const searchMovies = urlParams.get("search");
const movies = JSON.parse(localStorage.getItem("movies"));
if (JSON.parse(localStorage.getItem("movies")) === null) {
console.log("----load move datas----");
callGetMoviesAPI();
} else if (searchMovies === null) {
const filteredMovieData = movies.map((movie) => JSON.parse(localStorage.getItem(movie)));
displayMovieData(filteredMovieData);
} else {
let contentMovie = search_movie(searchMovies);
displayMovieData(contentMovie);
}
document.getElementById("sort").addEventListener("change", (event) => {
handleSortChange(event.target.value);
});
index.html
<body>
<movie-header></movie-header>
<div class="dropdown">
<label for="sort">arrange</label>:</label>
<select id="sort" onchange="handleSortChange(this.value)">
<option value="default">defalut</option>
<option value="title">title</option>
<option value="rating">rating</option>
</select>
</div>
I’m sorry if my question was rude. I’m a novice at developing and this is my first question
I checked with console.log to see where and what was going on, and I looked up similar questions in stack overflow, but I’m not sure. When I select drop-down, I want to see a list of newly sorted cards
조은영 is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.