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

Error message encountered: "myData undefined while executing server in Node.js"

Why does the ng-click function fail to execute when using the onclick attribute in AngularJS?

How can I create an onclick link within an alert message using JavaScript, even when the alert is not consistently displayed?

What is the procedure for initiating a POST request when the payload is ready for submission?

Duplicate key error occurred in the collection resulting in Error Handling: E11000

"Exploring the versatility of using variables in jquery's .css

In order to ensure JavaScript can be universally applied to all images, it needs to be made more generic

AngularJS view does not wait for the completion of $http.get request

Accessing the data from an HTML5 slider using JQuery

Switch from using pure JavaScript to jQuery or back

The close button is not functioning properly

When forcibly closing a window, the disconnect event for Socket.IO sockets may not trigger as expected

Refreshing a PNG file without the need to refresh the entire page

Why is the value of auth.loggedIn different in the middleware file compared to the template section after a successful login using loginWith in Nuxt JS Auth?

Only the initial TinyMCE editor that was added dynamically is visible, the rest are not showing

Customize marker icon in Vue when clicked

The functionality of linear mode seems to be malfunctioning when using separate components in the mat-horizontal-stepper

What is the reason behind Intellij Code Inspection indicating that a selector is not being used?

Regenerate main JavaScript files in Gulp whenever partials are edited

Are there any testing frameworks available for JavaScript that are similar to Junit and specifically designed for testing object-oriented JavaScript within Node