How can I filter contents based on rating

Question

This is my first project and I am trying to build a product filter. I created search and category filter which is working properly, but I am not able to create filter for rating.

This is my code for reference:

<div class="heading">
        <h6 class="mb-3">Filter By Area</h6>
      </div>
      <div class="form-check" v-for="filter in filters" :key="filter">
        <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault1"
          @click="() => filterAccommodations(filter)">
        <label class="form-check-label area-filter-each" for="flexRadioDefault1">
          {{ filter }}
        </label>
      </div>

      <div class="heading">
        <h6 class="mb-3 mt-3">Filter By Rating</h6>
      </div>
      <div class="form-check" v-for="starRating in starRatings" :key="starRating">
        <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault1"
          @click="() => starAccommodations(filter)">
        <label class="form-check-label area-filter-each" for="flexRadioDefault1">
          {{ starRating }} 
        </label>
      </div>

the search for area works perfectly and i have no issues. even the search bar works as good.

script

const filters = [
  "All",
  "Dagana",
  "Lhuentse",
  "Mongar",
  "Pemagatshel",
  "Tashiyangtse",
  "Trashigang",
  "Zhemgang",
];
const starRatings = [
  "All",
  "1",
  "2",
  "3",
  "4",
  "5",
];
export default {
  name: "SidebarFilter",
  props: ["filterAccommodations", "searchAccommodations" ,'filteredAccommodations','starAccommodations'],
  data() {
    return {
      filters,
      starRatings
    };
  },
};

these are on my components that i have build for the search filter.

and it meets with the content from another component at a parent file, which i call is model for my self reference.

Below is the Parent template

<div class="container">
        <div class="row">
            <div class="col-md-3 col-lg-3 col-xl-3 col-sm-12 col-xs-12">
                <SidebarFilter :filterAccommodations="filterAccommodations"
                    :searchAccommodations="searchAccommodations" 
                    :starAccommodations="starAccommodations"
                />
            </div>
            <div class="col-md-9 col-lg-9 col-xl-9 col-sm-12 col-xs-12">
                <AccommodationElements :accommodations="accommodations" />
            </div>
        </div>
    </div>

I am writing some functions to actually make the query on the json data. This is my script:

import ACCOMMODATION_DATA from '../Accommodation_DATA.json'
methods: {
        filterAccommodations(filter) {
            this.resetAccommodations();
            if (filter === "All") {
                this.accommodations = ACCOMMODATION_DATA;
            } else {
                this.accommodations = ACCOMMODATION_DATA.filter(accommodation => {
                    return accommodation.location_id.toLowerCase().includes(filter.toLowerCase());
                });
            }
        },

        starAccommodations(filter) {
            this.resetAccommodations();
            if (filter === "All") {
                this.accommodations = ACCOMMODATION_DATA;
            } else {
                this.accommodations = ACCOMMODATION_DATA.filter(accommodation => {
                    return accommodation.star_rate.toLowerCase().includes(filter.toLowerCase());
                });
            }
        },
        searchAccommodations(search) {
            this.resetAccommodations();
            this.accommodations = ACCOMMODATION_DATA.filter(accommodation => {
                return accommodation.title.toLowerCase().includes(search.toLowerCase());
            });
        },
        resetAccommodations() {
            this.accommodations = ACCOMMODATION_DATA;
        }
    }

JSON file sample:

{
        "id": 100,
        "title": "Onofredo Walkden",
        "content": "Salivary operation NEC",
        "image_id": "http://dummyimage.com/512x517.png/cc0000/ffffff",
        "banner_image_id": "http://dummyimage.com/x.png/ff4444/ffffff",
        "location_id": "Tashiyangtse",
        "address": "9 Briar Crest Hill",
        "map_lat": 40.5845053,
        "map_lng": -8.0854006,
        "is_featured": true,
        "star_rate": 4,
        "date_created": "6/22/2021",
        "price": 19433.22
}

Answer 1

You can maybe try it like this:

<template>
   <div>
      {{ filterAccommodations }}
   </div>
</template>




data() {
    return {
      title: "",
      location: "",
      starRate: 5,
    };
  },
  computed: {
    filterAccommodations() {
      return ACCOMMODATION_DATA.filter((acc) => {
        return (
          acc.location_id.toLowerCase().includes(this.location.toLowerCase()) &&
          acc.title.toLowerCase().includes(this.title.toLowerCase()) &&
          acc.star_rate === this.starRate
        );
      });
    },
  }

In your UI you will need 3 input fields, where you can set your title, location and star rating.