Minimum and Maximum Range Filter - JSON

Question

good night.

I am creating a project in Vue.JS 2x, where I re-screen a list of users from a JSON, I am consuming this JSON through a FAKE API REST, by the JSON-SERVER package.

I need to create a filter that takes the values Minimum and Maximum of Longitude and Latitude, from this filter the users that are inside the filter will appear on screen.

However, I’m not sure how to do this, I can’t create a logic that works for this. I’m having a hard time running this filter.

How can I fix this?

Example of RANGE for SPECIAL INPUT:

Longitude Mínima: -15.411580
Latitude Mínima -46.361899
Longitude Máxima: -2.196998
Latitude Máxima: -34.276938

User Filter:

Sampling of the JSON:

Vue template with component where I review the JSON date:

<template>
<div>
  <main>
    <div class="filter">
      <form>
        <p>Filtar por usuário:</p>
        <input type="radio" id="especial" name="filter" value="especial">
        <label for="especial">Especial</label><br>
        <input type="radio" id="normal" name="filter" value="normal">
        <label for="normal">Normal</label><br>  
        <input type="radio" id="trabalhoso" name="filter" value="trabalhoso">
        <label for="trabalhoso">Trabalhoso</label><br><br>
      </form>
    </div>
   <div class="users">
     <div class="container">
       <li v-for="(user, index) in users" :key="index" class="list-infos">
        <router-link :to="{name: 'UserPage', params: {id: user.email}}">
          <img :src="user.picture.large" alt="">
          <h1>{{user.name.first}} {{user.name.last}}</h1>
          <h3>{{user.location.street}}</h3>
          <p>{{user.location.city}}</p>
          <p>{{user.location.state}} - CEP: {{user.location.postcode}}</p>
        </router-link>
      </li>
     </div>
   </div>
  </main>

  </div>
</template>

<script>
import { api } from "@/services.js";

export default {
  name: 'UserList',
  data() {
    return {
      users: '',
      teste: '',
      userFilter: ''
    };
  },
  methods: {
    getUsers() {
      api.get(`/results`).then(r => {
        console.log(r.data);
        this.users = r.data;
      });
    },
    searchUser() {
      this.$router.push({ query: {q: this.teste} });
    },
  },
  computed: {
    url() {
      let queryString = ""
      for(let key in this.$route.query) {
        queryString += `&${key}=${this.$route.query[key]}`
      }
      console.log(queryString);

      return queryString;
    }
  },
  created() {
    this.getUsers();
  },
}
</script>

<style scoped lang="scss">
main {
  display: flex;
  width: 100%;
}

.filter {
  width: 30%;
  height: max-content;
  margin-right: 10px;

  form {
    background: #F4F4F4;
    padding: 30px 20px;

    p {
      font-weight: bold;
      margin-bottom: 15px;
    }
  }
}

.users {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  background: #F4F4F4;
  justify-content: center;

  .container {
    width: 95%;
    display: flex;
    flex-wrap: wrap;
    margin-top: 50px;
  }

  li {
    text-align: center;
    list-style: none;
    width: 33.33%;
    width: 30%;
    background: #EDEDED;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-transform: capitalize;
    margin: 10px;
    padding: 30px;
    border-radius: 8px;

    img {
      border-radius: 8px;
    }

    h1 {
      font-size: 20px;
      margin-top: 20px;
      margin-bottom: 20px;
    }

    h3 {
      font-size: 16px;
      margin-top: 0;
      margin-bottom: 5px;
      font-weight: normal;
    }
  }
}


/* ================= Responsive ================= */
@media screen and (max-width: 768px) {
  main {
    flex-direction: column;
  }

  .header {
    flex-direction: column;

    .logo {
      width: 100%;
      margin-bottom: 15px;
    }

    .search {

      form {
        justify-content: center;
        display: flex;

        #search {
          max-width: 100%;
          width: 65%;
        }
      }
    }
  }

  .filter {
    width: 100%;
    margin: 0 0 10px 0;
  }

  .users {
    .container {
      flex-direction: column;

      .list-infos {
        width: 100%;
        margin: 0 0 20px 0;
      }
    }
  }
}
</style>

Answer 1

From what I understand you may have a small data structure as well as a gigantic size. I think the most appropriate way to do this type of filtering would be in the back end instead of the front end.

But why can’t we filter in front-end?

As long as you have a small data structure make use of a recursive search would be a great option on the front end, but thinking of a data files of immeasurable size this could load your application too much and cause serious performance issues. So bringing the back-end would be a better option.

You could use the data of latitude and longitude, restrict them to sizes a little larger or smaller of them and with this ask for the back end perform the search and bring you data or in case people are between these coordinates.

If you choose to filter through the same front end, I advise you to search for recursive search or binary tree search (to have a base), and here is a link that tells you a little more about it: Binary tree of search.

I hope I’ve helped. :)