Sort through data based on specific data fields upon the button click event using JSON and Vue.js

Question

Sort through data based on specific data fields upon the button click event using JSON and Vue.js

Is there a way to use JSON files in Vue.js to filter data based on category when a button is pressed? I have objects with categories inside the data.

portfolio-v1.json

    {
  "data":[
    {
      "image_path":"static/products/DELUXE-BATHROBE.jpg",
      "title":"Beautiful Designs",
      "heading":"Lorem Ipsum is simply dummy.",
      "content": "Lorem Ipsum is simply dummy text of the printing and typesetting industry.",
      "vendor":"George Courey",
      "category":"Blanket"
    },
    {
      "image_path":"static/products/HOME-CARE-SLIP-PAD.png",
      "title":"Mutifunctionals Blocks",
      "heading":"Lorem Ipsum is simply dummy.",
      "content": "Lorem Ipsum is simply dummy text of the printing and typesetting industry.",
      "vendor": "George Courey",
      "category": "Blanket"
    },
    {
      "image_path":"static/products/HERRINGBONE-THERMAL-BLANKET.jpg",
      "title":"Vuejs App For Game",
      "heading":"Lorem Ipsum is simply dummy.",
      "content": "Lorem Ipsum is simply dummy text of the printing and typesetting industry.",
      "vendor": "George Courey",
      "category": "Blanket"
    }
  ]
}

portfolioGrid.vue

<template>
  <div class="row col-space">
    <!-- START PORTFOLIO FILTER AREA -->
    <div class="col-12">
      <div class="text-center">
        <div class="portfolio-filter mb-40">
          <button class="active" data-filter="*">Show all</button>
          <button data-filter=".cat1">Linens</button>
          <button data-filter=".cat2">Blankets</button>
          <button data-filter=".cat3">Protective Products</button>
          <button data-filter=".cat4">Top Sheets</button>
          <button data-filter=".cat5">Staff Apparel</button>
          <button data-filter=".cat6">Towels</button>
          <button data-filter=".cat7">Bathrobes & Slippers</button>
        </div>
      </div>
    </div>
    <!-- END PORTFOLIO FILTER AREA -->
    <div v-for="(portfolio,index) of portfoliov1.data.slice(0,showNoOfPosts)" :key="index"
         class="col-sm-12 col-md-6 col-lg-4 ">
      <div class="overlay-wrap">
        <img :src="portfolio.image_path" alt="gallery images" class="img-fluid border-rad w-100" height="500"
             width="500"/>
        <a :href="portfolio.image_path" class="card-img-overlay primary-tp-layer pos-center text-center"
           data-fancybox="images">
                    <span class="center-holder">
                        <a class="ih-fade-down square-40 rounded-circle bg-white shadow-md">
                            <i class="fa fa-plus align-middle"></i>
                        </a>
                    </span>
        </a>
      </div>
    </div>
  </div>
</template>
<script>
import portfoliov1 from 'Components/data/portfolio-v1.json'

export default {
  props: ['showNoOfPosts'],
  data() {
    return {
      portfoliov1
    }
  }
}
</script>

I am looking for a way to dynamically display items based on the selected category using buttons. The goal is to filter out and display only items that match the selected category. Any suggestions on how this can be achieved?

javascript json vue.js vuejs2

Answer 1

Answer №1

To optimize your data handling, consider adding a filter variable within your data object:

  data() {
    return {
      portfoliov1,
      filter: ""
    }
  }

When a button is clicked, update the value of this variable accordingly.

<button class="active" @click="filter = ''">Show all</button>
<button @click="filter = 'Linens'">Linens</button>

Additionally, create a computed property to fetch the filtered data:

computed: {
  portfolio() {
    if (!this.filter) {
      return this.portfoliov1.data;
    }
    return this.portfoliov1.data.filter(p => p.category === this.filter);
  }
}

Your template will then be updated as follows:

<div v-for="(p, index) of portfolio.slice(0,showNoOfPosts)"

Additional suggestion:

In order to streamline your code, consider generating the buttons using a v-for loop like so:

<button v-for="category in categories" :key="category" :class="{ 'active': filter === category }" @click="filter = category" />

data() {
  return {
    // ...
    categories: ["Blanket", /* ... */]
  }
}

Note that handling the "no-filter" scenario is crucial.

Answer 2

To optimize your data handling, consider adding a filter variable within your data object:

  data() {
    return {
      portfoliov1,
      filter: ""
    }
  }

When a button is clicked, update the value of this variable accordingly.

<button class="active" @click="filter = ''">Show all</button>
<button @click="filter = 'Linens'">Linens</button>

Additionally, create a computed property to fetch the filtered data:

computed: {
  portfolio() {
    if (!this.filter) {
      return this.portfoliov1.data;
    }
    return this.portfoliov1.data.filter(p => p.category === this.filter);
  }
}

Your template will then be updated as follows:

<div v-for="(p, index) of portfolio.slice(0,showNoOfPosts)"

Additional suggestion:

In order to streamline your code, consider generating the buttons using a v-for loop like so:

<button v-for="category in categories" :key="category" :class="{ 'active': filter === category }" @click="filter = category" />

data() {
  return {
    // ...
    categories: ["Blanket", /* ... */]
  }
}

Note that handling the "no-filter" scenario is crucial.

Sort through data based on specific data fields upon the button click event using JSON and Vue.js

Answer №1

Similar questions

When trying to use bootstrap modal buttons, they do not trigger with just a single click when

When ran automatically as a cron job, the JavaScript script fails to establish a connection with MongoDB

Is it possible to retrieve any user data by id using Vue 3 Firebase Auth?

Transferring PHP array data to JavaScript using JSON

Use jquery ajax to upload an image with a reusable input field

Can $refs cause issues with interpolation?

When integrating react-router 5 and redux 7, there is an issue where the state is not being reset when navigating to a new route using react-router's <Link

The string array being sent to the WebService is being cut off

Capable of retrieving the identification number but incapable of executing a POST request

Guide to iterating over a set of data and retrieving the items based on specified query parameters

Prevent the execution of useEffect on the client side in Next JS if the data has already been retrieved from the server

Linkyfy.js does not function correctly with each and not statements

Guide on clearing the value of the first textarea and transferring it to the second textarea using JavaScript

Creating a unique custom error message for every validation option

Express failing to deliver static content

Transform JavaScript code into HTML using jQuery.`

Having a problem with the glitch effect in Javascript - the text is oversized. Any tips on how to resize

Steps for deactivating tab stops on the primary webpage in the presence of a snackbar

Is there a way to create a function that is able to return both a value and a promise

transferring information between GWT web application and App Engine backend (Java)