Vue JS: filter on API-CodePudding

below in my code, i have stored user in API JSON and i wanted to get users with role : Admin and their username only but it didn't work. below is my JSON body response and code

  "response": [
        {
            "profile_picture": "",
            "verified_by_email": false,
            "_id": "61c3a765c5f55200049de490",
            "username": "user2",
            "email": "[email protected]",
            "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": "[email protected]",
            "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 my API  respone in array Users

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

}

CodePudding user response：

Do you want to map all the roles? Or do you want to get all the admins?

Also could it be that you forgot to go one level deep from your result set?

var users = 
{
"response": [
        {
            
            "_id": "61c3a765de490",
            "username": "user2",
            "email": "[email protected]",
            "password": "$2a$10$pMOyjwVf1RkaIeVdNKWdaucVRybsDEEN3fjxLZOctJyL42HqrlRgC",
            "role": "User",
            "phone_number": "12365478",

        },
        {
           
            "_id": "61c325e424929f",
            "username": "nina",
            "email": "[email protected]",
            "password": "$2a$10$steP5Aq9mcTIA8XLjm9Y5ONoWQUMEWLD7TJPSHzTksqbOTpv9MbD.",
            "role": "Admin",
            "phone_number": "123456",
           
        }
    ]
}

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

console.log(roles, admins)

CodePudding user response：

You need to return from getAdmin and also provide a comparison in filter to test for the Admin role

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

Edited based on modified question:

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