Sorting and Searching in Arrays with Vue js

Cover image

In this article, we going to learn, how we can implement sorting and searching in arrays with Vue js.

What are we using for this project?
1. Vue 3
2. Composition API
3. Fake JSON ( jsonplaceholder )
4. Fetch

Vue 3 introduces the setup function. Two ways we implement the setup function.

#one way
<script setup>
  // code
</script>

#another way
<script>
export default {
 setup() {
   // code
 }
}
</script>

You want to learn more about setup check out the official doc
Firstly we fetch all the users from jsonplaceholder.

<script setup>
  import { ref } from 'vue'
  const users = ref([])
   // get users
  function getUsers() {
    fetch('https://jsonplaceholder.typicode.com/users', { method: 'GET'})
    .then(res => res.json())
    .then(data => users.value = data);
  }
  getUsers();
</script>

We get all users from API and store our data on users. Now we display all users

User render

<table class="styled-table">
  <thead>
    <tr>
      <th>SL</th>
      <th>Name</th>
      <th>Username</th>
      <th>Email</th>
    </tr>
  </thead>
  <tbody>
    <tr v-for="(user, ind) in users">
      <td>{{ ind+1 }}</td>
      <td>{{ user.name }}</td>
      <td>{{ user.username }}</td>
      <td>{{ user.email }}</td>
    </tr>
  </tbody>
</table>

Table design

<style>
  input[type=text] {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
  }
  .styled-table {
    border-collapse: collapse;
    margin: 25px 0;
    font-size: 0.9em;
    font-family: sans-serif;
    min-width: 400px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
  }
  .styled-table thead tr {
    background-color: #009879;
    color: #ffffff;
    text-align: left;
  }
  .styled-table th,.styled-table td {
    padding: 12px 15px;
  }
  .styled-table tbody tr {
    border-bottom: 1px solid #dddddd;
  }
  .styled-table tbody tr:nth-of-type(even) {
    background-color: #f3f3f3;
  }
  .styled-table tbody tr:last-of-type {
    border-bottom: 2px solid #009879;
  }
  .styled-table tbody tr.active-row {
    font-weight: bold;
    color: #009879;
  }
</style>

Now look like this

It’s time to work on searching

<input type="text" v-model="search" placeholder="Search name" />

we use Computed Property. make sure you import computed

<script setup>
  import { ref, computed } from 'vue'
  const users = ref([])
  const search = ref('')
  
  // filter users
  const userFilterAndSearchAndSort = computed(() => {
    return users.value.filter((user) => {
      let name = user.name.toLowerCase()
      let searchValue = search.value.toLowerCase()
      return name.includes(searchValue)
    })
  })
  
  // get users
  function getUsers() {
    fetch('https://jsonplaceholder.typicode.com/users', { method: 'GET'})
    .then(res => res.json())
    .then(data => users.value = data);
  }
getUsers();
</script>

You can see here we store the search or user query in the search variable.
You can see here the userFilterAndSearchAndSort method, first of all, we filter all users and check that this word includes this user, if have then return user.

Make sure you check this line from the table

<tr v-for="(user, ind) in users">
to
<tr v-for="(user, ind) in userFilterAndSearchAndSort">

Your result looks like this now. Our search functionality makes done.

Now we working on sorting
We implement here ASC & DSC system Like asc a-z A-Z and 0–9
desc z-a Z-a and 9–0. we do not implement the reverse system like the first item shows the last position and the last item shows the first position.
Now implements time.

We need to modify our userFilterAndSearchAndSort

  const search = ref('')
  const currentSortDir = ref('asc')
  const currentSort = ref('name')
  // filter users
  const userFilterAndSearchAndSort = computed(() => {
    let filterUserList = users.value;
    
    // search
    filterUserList = users.value.filter((user) => {
      let name = user.name.toLowerCase()
      let searchValue = search.value.toLowerCase()
      return name.includes(searchValue)
    });
// sort
    return filterUserList.sort((a,b) => {
      let currentSortDirValue = currentSortDir.value
      let currentSortValue = currentSort.value
      
      let modifier = 1;
      if(currentSortDirValue === 'desc') modifier = -1;
      if(a[currentSortValue] < b[currentSortValue]) return -1 * modifier;
      if(a[currentSortValue] > b[currentSortValue]) return 1 * modifier;
      return 0;
    })
  })

added a new method

function sortBy(param) {
  if(param === currentSort.value) {
     currentSortDir.value = currentSortDir.value==='asc'?'desc':'asc';
  }
  currentSort.value = param;
}

And update the table and CSS

<th>
  <a href="#" @click="sortBy('name')" :class="[currentSort == 'name' ? 'active' : '']">
    Name
  </a>
</th>
<th>
  <a href="#" @click="sortBy('username')" :class="[currentSort == 'username' ? 'active' : '']">
    Username
  </a>
</th>
## css
a {
  text-decoration: none;
  color: white;
}
.active {
  color: black;
}

Checkout Source code & demo

Enjoy codes.