Filtering on API

Hi there,

Let’s assume the database you connect to with your API contains a huge amount of items. Furthermore, you only want to load the items within a specific category. I know this can be done with a filter via a computed property.

However, it seems to me that it can save a lot of loading time when the filtering already takes place within the API. In this case, only the relevant items would be loaded from the database.

I searched the Internet extensively, but I still cannot find a lot of documentation on how this can be done. I have two questions:

  1. Does someone know how you can filter on API when you’re using VueJS? Or, as I understand it so far, in other words: how can you make dynamic API calls?
  2. Is this a recommended approach? Or is filtering with the use of computed properties fast enough? From what database size does it make sense to worry about loading time?

Thanks a lot.

Your API has to support the filters you want. Your frontend will send the request with a certain payload of filters it wants to apply to the response.

Yes. There’s no point in pulling a massive amount of data just to have the frontend do the filtering. Sometimes, depending on the UX, it’s necessary to grab a batch for the FE to filter, but 9/10 times it’s far better to rely on the BE to do the heavy lifting (and save on response size).

Thanks for your reply and very useful explanation. It’a clear to me that I would like to filter on the API now. As I said, I tried to find some documentation about this on the Internet, but I didn’t manage to find something useful yet.

Let’s say you want the visitor of the page to be able to browse through 40.000 items. Let’s assume these items are ordered by their date of creation and infinite scrolling is used to make sure they are not all loading at the same time.

How can you then make a filter that allows the visitor of the page to show the items within a specific date range? And how do you make sure this filter works on the API?

Or in other words: Assuming that the API allows this type of filtering, how can you make the API URL dynamic within VueJS so that it allows for filtering on a specific date range?

Thanks a lot. Really struggling to find the right information on this topic :slight_smile:

As @JamesThomson said, your API has to support filtering and you send a payload with filters. You can follow, https://jsonapi.org/, specs.

As an example, https://yourapi.com/users?filter.age=30&filter.country=germany

Thanks for your reply.

This part is clear to me. What I am still struggling with, however, is how to make a filter on the webpage that the visitor can use himself to filter on the API.

I would like to enable the visitor to only load the items with a specific date. The visitor should be able to pick the date by himself.

So that if the visitor picks date X, the API request will be: https://yourapi.com/users?filter.date=X
and if the visitor picks date Y, the API request will be: https://yourapi.com/users?filter.date=Y

This should happen without having to load all 40.000 items first. So I am looking for a way to make the API requests dynamic.

Is this possible?

Thanks again.

If I understand you correctly, then of course, it is possible. You can use JS libraries like Axios or Devour or you can use fetch method in vanilla JS. Off the top of my head:

<template>
 <input type="date" v-model="selectedDate" />
 <button @click="getFilteredUsers">Filter using selected date</button>
 <div>
  <p
     v-for="user in users"
    :key="user.id"
  >
  {{ user.name }}
 </p>
 </div>
</template>
<script>
export default {
 data: () => ({
  selectedDate: null,
  users: [],
 }),

 methods: {
  async getFilteredUsers() {
   const filteredUsers = await fetch(`https://yourapi.com/users?filter.date=${this.selectedDate}`;
   this.users = await filteredUsers.json();
  },
 },
};
</script>

Hope that answers your question.

Thanks! That’s exactly what I need. However, it isn’t working yet.

JavaScript:

var app = new Vue({
  el: '#app',
  data: {
    selectedUser: null,
    users: [],
    posts: []
  },
  methods: {
    async getFilteredUser() {
     const filteredUser = await fetch('https://jsonplaceholder.typicode.com/users?id=${this.selectedUser}');
     this.users = await filteredUser.json(); }
  }
});

HTML:

Link:

https://www.jaspernip.work/test.php

Would be awesome if someone could give me the final push towards a solution!

That is working fine. You just need to replace single quotes with back ticks.

// change this
const filteredUser = await fetch('https://jsonplaceholder.typicode.com/users?id=${this.selectedUser}');

// to that
const filteredUser = await fetch(`https://jsonplaceholder.typicode.com/users?id=${this.selectedUser}`);

Thanks so much!! It works. Last question: Is there a way to use axios instead of fetch? I understood that that’s the better way to do it.

Thanks again :slight_smile:

const response = await axios.get('https://jsonplaceholder.typicode.com/users', {
  params: { id: this.selectedUser }
});

this.users = response.data;

Good information thanks for sharing
vmware

Thank you! It works!!