`Building a movie search site for a project using OMDb API. Everything populates as expected but i can't seem to figure out how to Sort them by name from my drop down. Any help would be appreciated. I've tried a few different variations of sorting to get it to work and none have. I'm sure its just something stupid i'm doing but would love a bit of guidance. Thanks
<select name="" id="filter">
<option value="" disabled selected>Sort</option>
<option value="Alphabetical"
onclick="orderListBy(post.Title).toSorted">A-Z</option>
</select>
<div class="post-list">
<div class="post">
<div class="post__title">
</div>
<p class="post__body">
</p>
<figure class="post__img">
</figure>
</div>
</div>
const postListEl = document.querySelector('.post-list')
const Title = localStorage.getItem("Title")
async function onSearchChange(event) {
const Title = event.target.value
setTimeout(() =>{
renderPosts(Title)}, 1000)
}
async function renderPosts(Title) {
const posts = await fetch(
`https://www.omdbapi.com/?apikey=67b7f307&s=${Title}`
);
const postsData = await posts.json();
postListEl.innerHTML = postsData.Search.map((post) => postHTML(post)).join(
""
);
}
function postHTML(post) {
return `
<div class="post">
<div class="post__title">
${post.Title}
</div>
<p class="post__body">
${post.Year}
</p>
<figure class="post__img"><img src="${post.Poster}"</figure>
</div>
`;
}
function orderListBy(event) {
return function (a, b) {
if (a[post.Title] > b[post.Title]) {
return 1;
}
else if (a[post.Title] < b[post.Title]) {
return -1;
}
return 0;
}
}
Ok let's build an example. this is for the select
part:
function sortBy(prop) {
if (!prop) {
return;
}
alert(prop)
}
<select onchange="sortBy(this.value)">
<option>Sort By</option>
<option value="name">Name</option>
<option value="year">Year</option>
</select>
For the sorting you can use function from this answer.
Let's combine:
function sortBy(prop) {
if (!prop) {
return;
}
renderList(list.sort(getSortMethod(prop)))
}
function renderList(list) {
console.log(list)
}
let list = [{
name: 'Mark',
year: 2021,
},
{
name: 'Anne',
year: 2020,
},
{
name: 'James',
year: 1988,
},
]
function getSortMethod() {
var _args = Array.prototype.slice.call(arguments);
return function(a, b) {
for (var x in _args) {
var ax = a[_args[x].substring(1)];
var bx = b[_args[x].substring(1)];
var cx;
ax = typeof ax == "string" ? ax.toLowerCase() : ax / 1;
bx = typeof bx == "string" ? bx.toLowerCase() : bx / 1;
if (_args[x].substring(0, 1) == "-") {
cx = ax;
ax = bx;
bx = cx;
}
if (ax != bx) {
return ax < bx ? -1 : 1;
}
}
}
}
<select onchange="sortBy(this.value)">
<option>Sort By</option>
<option value="+name">Name (asc)</option>
<option value="-name">Name (desc)</option>
<option value="+year">Year (asc)</option>
<option value="-year">Year (desc)</option>
</select>