javascriptfunctionsorting

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>