How to Extract Only Data that Meets Conditions from an Array Using filter in Vue (JavaScript)
Thank you for your continued support.
This article contains advertisements that help fund our operations.
Table Of Contents
This article summarizes how to extract only data that meets conditions from an array using filter in Vue (JavaScript).
⇨ Click here for the Vue article index
Things to Do Next
I want to write a function that extracts only people in the "Ikemen" category from an associative array of names and categories.
How to Use Computed Properties in Vue
Conclusion (Extracting only Ikemen using filter)
From the code.
<template>
<!-- Display the result -->
<div>{{ afterFilter }}</div>
</template>
<script>
export default {
data() {
return {
// Array of people's names and categories
people: [
{
category: "ikemen",
name: "Sato Takeru",
},
{
category: "ikemen",
name: "Yokohama Ryusei",
},
{
category: "ikemen",
name: "Oguri Shun",
},
{
category: "busu",
name: "ore",
},
{
category: "busu",
name: "omae",
},
],
}
},
computed: {
afterFilter() {
// Perform the filter
return this.people.filter(person => person.category === "ikemen")
},
},
}
</script>With this code, the display will look like this.
[ { "category": "ikemen", "name": "Sato Takeru" }, { "category": "ikemen", "name": "Yokohama Ryusei" }, { "category": "ikemen", "name": "Oguri Shun" } ]Successfully extracted only the Ikemen.
Explanation
Filter can only be used with arrays
If used with anything other than an array
Error in render: "TypeError: Cannot read properties of undefined (reading 'filter')"An error like this will occur, and nothing will be displayed on the screen. Bummer.
Breaking down the array's data into individual items and checking with if statements inside the filter function
afterFilter() {
const filterData = this.people.filter((person) =>
person.category === "ikemen");
},This essentially means,
afterFilter() {
const filterData = this.people.filter((person) => {
if (person.category === "ikemen") {
return person;
}
});
return filterData;
},they are doing the same thing.
Checking if the category matches inside the if statement and returning, where all the returned persons get stored in const filterData.
The part that represents each item (person) can be anything
this.people.filter(x => x.category === 'ikemen')this.people.filter(a => a.category === 'ikemen')It can be x or a, it doesn't matter.
A common practice in programming to represent return values.
How to deepen your understanding?
Firstly, try adding console.log inside the filter function.
afterFilter() {
const filterData = this.people.filter((person) => {
console.log(person)//output each person one by one
});
return filterData;
},Were each person displayed one by one?
You can freely write code inside {} like this.
const filterData = this.people.filter(person => {
console.log(person) //output each person one by one
person.category = "ikemen" //change everyone's category to ikemen
return person.category === "ikemen"
//The above code is equivalent to
// if(person.category === 'ikemen'){
// return person
// }
})Output:
[ { "category": "ikemen", "name": "Sato Takeru" }, { "category": "ikemen", "name": "Yokohama Ryusei" }, { "category": "ikemen", "name": "Oguri Shun" }, { "category": "ikemen", "name": "ore" }, { "category": "ikemen", "name": "omae" } ]Successfully, everyone is now Ikemen!
What a thrilling conclusion!!
⇨ How to Determine if the First Character of a String is a Specific Character in JavaScript (Vue.js)
Summary
I've written about filter.
If you have complaints or corrections, please feel free to contact me via Twitter DM below.
That's all for now!
