如何使用下拉菜单对 API 响应进行排序？

Question

`使用 OMDb API 为项目构建电影搜索网站。一切都按预期填充，但我似乎无法弄清楚如何从下拉菜单中按名称对它们进行排序。任何帮助将不胜感激。 我尝试了几种不同的排序方式来使其发挥作用，但都没有成功。我确信这只是我正在做的愚蠢的事情，但希望得到一些指导。谢谢

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

Answer 1

好吧，让我们构建一个示例。这是

select

部分：

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>

对于排序，您可以使用此答案中的功能。

我们一起来吧：

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>