Sort the Vue.js array by year and search for items by tag

Question

Sort the Vue.js array by year and search for items by tag

In my VueJS project, I am working with data fetched from an API using axios. The data consists of projects with various properties such as year, location, and tags like house or park. I have implemented a filtering system to sort the projects based on a specific property:

sortby(data) {
 // data = {prop: "year", tag: "house"}
 //
 if (data.prop === "year") {
   this.projects.sort((a, b) => (a[data.prop] < b[data.prop] ? 1 : -1));
 } else {
   this.projects.sort((a, b) => (a[data.prop] < b[data.prop] ? -1 : 1));
 }
},

However, after sorting the projects, I now want to display only those objects that have the tag equal to "house". Can anyone suggest how I can achieve this? Thank you!

javascript arrays sorting vue.js

Answer 1

Answer №1

If you're looking to filter arrays in JavaScript, there are a couple of ways you can do it.

const filteredProjects = projects.filter(({category}) => category === "house");

You could also consider using computed properties for this purpose.

data: () => ({
  projects: [
    {type: "year", category: "house"},
    ...
  ]
}),
computed: {
    filteredProjects: function () {
      return this.projects.filter(({category}) => category === "house");
    }
  }

Once you have set up the filtering logic, you can easily display the results in your template.

<template>
  <div>
    {{ filteredProjects }}
  </div>
</template>

Answer 2

If you're looking to filter arrays in JavaScript, there are a couple of ways you can do it.

const filteredProjects = projects.filter(({category}) => category === "house");

You could also consider using computed properties for this purpose.

data: () => ({
  projects: [
    {type: "year", category: "house"},
    ...
  ]
}),
computed: {
    filteredProjects: function () {
      return this.projects.filter(({category}) => category === "house");
    }
  }

Once you have set up the filtering logic, you can easily display the results in your template.

<template>
  <div>
    {{ filteredProjects }}
  </div>
</template>

Sort the Vue.js array by year and search for items by tag

Answer №1

Similar questions

Mapping JSON data to a HashMap

Saving various data types in Java programming language on Android devices

Which option is more suitable for my needs: utilizing an array or an sqlite database

Having trouble displaying information in JavaScript after using getScript() to retrieve data from an API containing a JSON block database

Checking the status of a checkbox after submitting using AngularJs

execute the function within the data() method

An issue has been encountered in NodeJS with a route that begins with a percent sign causing an error

Vue.js provides an interesting object that contains observed data

Using jQuery to create a drop-down menu

Trouble with Basic JavaScript Comparison Function

Running tests in jest with or without mocks depending on the condition

Removing Content with React

What is the best approach for retrieving Google API responses - accessing them directly from the frontend or routing through the backend first?

Images loaded from Firebase are only showing as text in the RecyclerView fragment, rather than displaying as actual images

Tips for implementing an overlay navigation menu specifically for mobile devices, with a standard navigation bar for larger screens

The issue with ng-if not functioning within ng-repeat is that the ng-if directive

Tips for showcasing an uploaded image with ajax

Adding objects from an existing JSON file to an empty object in Node.js is a straightforward process

Ways to extract data from a chosen radio button choice

Employing setTimeout for hover interactions in conjunction with a tooltip