Using Vue JS to apply a filter to data fetched from an API

Question

Using Vue JS to apply a filter to data fetched from an API

Within my code, I attempted to retrieve users with the role of Admin and only their usernames from the API JSON data. However, I encountered an issue where it did not work as expected.

"response": [
        {
            "profile_picture": "",
            "verified_by_email": false,
            "_id": "61c3a765c5f55200049de490",
            "username": "user2",
            "email": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="83f6f0e6f1b2c3fae2ebececade0ecee">[email protected]</a>",
            "password": "$2a$10$pMOyjwVf1RkaIeVdNKWdaucVRybsDEEN3fjxLZOctJyL42HqrlRgC",
            "role": "User",
            "phone_number": "12365478",
            "createdAt": "2021-12-22T22:32:05.034Z",
            "updatedAt": "2021-12-22T22:32:05.034Z",
            "__v": 0
        },
        {
            "profile_picture": "",
            "verified_by_email": false,
            "_id": "61c325ea02526b000424929f",
            "username": "nina",
            "email": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="97f9fef9d7eef6fff8f8b9f4f8fa">[email protected]</a>",
            "password": "$2a$10$steP5Aq9mcTIA8XLjm9Y5ONoWQUMEWLD7TJPSHzTksqbOTpv9MbD.",
            "role": "Admin",
            "phone_number": "123456",
            "createdAt": "2021-12-22T13:19:38.240Z",
            "updatedAt": "2021-12-22T13:19:38.240Z",
            "__v": 0
        }
    ]
}

computed:{
getAdmin(){
// I stored the API response in the Users array

this.Users.filter(users => {
          return users.role;
}
}
}

javascript vue.js

Answer 1

Answer №1

To implement the functionality, you must return from the getAdmin function and include a comparison within the filter to check for the Admin role.

computed:{
  getAdmin(){
    return this.Users.filter(user =>  user.role === 'Admin')
  }
}

Modified based on the updated question:

computed:{
  adminNames(){
    return this.Users.filter(user =>  user.role === 'Admin').map(user =>  user.username)
  }
}

Revised according to the feedback received:

If you anticipate only one Admin user at a time, you could use the following approach:

computed:{
  adminName(){
    const admin = this.Users.find(user => user.role === 'Admin')
    return admin && admin.username

    // or using optional chaining
    // return this.Users.find(user => user.role === 'Admin')?.username
  }
}

Answer 2

To implement the functionality, you must return from the getAdmin function and include a comparison within the filter to check for the Admin role.

computed:{
  getAdmin(){
    return this.Users.filter(user =>  user.role === 'Admin')
  }
}

Modified based on the updated question:

computed:{
  adminNames(){
    return this.Users.filter(user =>  user.role === 'Admin').map(user =>  user.username)
  }
}

Revised according to the feedback received:

If you anticipate only one Admin user at a time, you could use the following approach:

computed:{
  adminName(){
    const admin = this.Users.find(user => user.role === 'Admin')
    return admin && admin.username

    // or using optional chaining
    // return this.Users.find(user => user.role === 'Admin')?.username
  }
}

Answer 3

Answer №2

Utilize a combination of filter and map functions to achieve the desired outcome.

var users = 
{
"response": [
        {
            
            "_id": "61c3a765de490",
            "username": "user2",
            "email": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="8ffafceafdbecff6eee7e0e0a1ece0e2">[email protected]</a>",
            "password": "$2a$10$pMOyjwVf1RkaIeVdNKWdaucVRybsDEEN3fjxLZOctJyL42HqrlRgC",
            "role": "User",
            "phone_number": "12365478",

        },
        {
           
            "_id": "61c325e424929f",
            "username": "nina",
            "email": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="9af4f3f4fbdae3fbf2f5f5b4f9f5f7">[email protected]</a>",
            "password": "$2a$10$steP5Aq9mcTIA8XLjm9Y5ONoWQUMEWLD7TJPSHzTksqbOTpv9MbD.",
            "role": "Admin",
            "phone_number": "123456",
           
        }
    ]
}

// Retrieve all admins
var admins = users['response'].filter((user) => user.role === 'Admin').map((user) => user.username)

console.log(admins)

Answer 4

Utilize a combination of filter and map functions to achieve the desired outcome.

var users = 
{
"response": [
        {
            
            "_id": "61c3a765de490",
            "username": "user2",
            "email": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="8ffafceafdbecff6eee7e0e0a1ece0e2">[email protected]</a>",
            "password": "$2a$10$pMOyjwVf1RkaIeVdNKWdaucVRybsDEEN3fjxLZOctJyL42HqrlRgC",
            "role": "User",
            "phone_number": "12365478",

        },
        {
           
            "_id": "61c325e424929f",
            "username": "nina",
            "email": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="9af4f3f4fbdae3fbf2f5f5b4f9f5f7">[email protected]</a>",
            "password": "$2a$10$steP5Aq9mcTIA8XLjm9Y5ONoWQUMEWLD7TJPSHzTksqbOTpv9MbD.",
            "role": "Admin",
            "phone_number": "123456",
           
        }
    ]
}

// Retrieve all admins
var admins = users['response'].filter((user) => user.role === 'Admin').map((user) => user.username)

console.log(admins)

Using Vue JS to apply a filter to data fetched from an API

Answer №1

Answer №2

Similar questions

What is the best way to access the front camera on both Android and iOS devices in order to capture a photo using Vue.J

What is the proper way to delete a callback from a promise object created by $q.defer() in AngularJS?

Are there any other options besides using the React Material-UI makeStyles() function for styling class Components?

How the Marvel of jQuery Ignites the Power of

Receiving the [object HTMLInputElement] on the screen rather than a numerical value

Transform a dynamic web page into a static one using Next.js

Listen for events in a child process in NodeJS

Using Linux variables in the .env file of your Vue.js project can provide a convenient way to

Tips for identifying the correct selectedIndex with multiple select elements present on one page

Navigating through different sections of your Angular app can be easily accomplished using

Selection Change Event for Dropdown Menu

JavaScript function for automatic scrolling to the bottom of the page is not functioning as expected

Issue with sending data from JQuery Ajax to PHP codeExplanation:The problem

I'm facing an issue with converting my object to an array as I keep getting the message: "ERROR TypeError: undefined

What is the best way to import modules with the "@" symbol in their path when working with Node.js?

The React Hook useEffect is missing a dependency: 'handleLogout'. Make sure to either add it to the dependency array or remove it from the useEffect hook

Is there an easy method for extracting URL parameters in AngularJS?

When a card is clicked in the parent component, data is sent to the child component in Angular. The card contains an image, name, ID,

Problem related to permissions within a node.js package

Having trouble with overriding an @media query for material-ui react components?