How to sort an API response using a dropdown?

`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

HTML

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

Javascript

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

>Solution :

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>