how to check if admin exist in json

Question

I am building an app with vuejs. I am getting a json data from an api.

The json contains two users.

One of the user has admin role and the other does not have admin role

I want to check if the user has admin role when it displays the users

json data

users array object

{
    "users": [{
        "id": "1f7524c5-108e-4f33-a58e-1b8efbbac7c",
        "name": "nwafor nnamdi",
        "email": "nna@gmail.com",
        "phone": "+2348032547845",
        "admin": {
            "id": "1f0e88a1-ac3d-480f-b8ca-e3c2481039c7",
            "user_id": "1f7524c5-108e-4f33-a58e-1b8efbbac7c",
            "role": "manager",
            "created_at": "2021-12-31T10:35:10.000000Z",
            "updated_at": "2021-12-31T11:08:51.000000Z",
            "deleted_at": null
        }
    }, {
        "id": "jduw-dieke-9e8ej-eje8-ej383j",
        "name": "admin",
        "email": "admin@gmail.com",
        "phone": "08032547856"
    }]
   }


<tr v-for="(user, index) in users" :key="index">
  <td>
  <button id="make-admin" @click="changeRole('none')" v-if="user.admin && user.admin.role == 'manager'"> Remove Manager</button>
  <button id="make-admin" @click="changeRole('manager')"  v-else-if="user.admin && user.admin.role == 'super'"> Remove Super Admin</button>
  <button id="make-admin"  @click="changeRole('super')" v-if="user.admin && user.admin.role == 'none'"> Super Admin</button>
  <button id="make-admin"  @click="changeRole('super')" v-if="user.admin && user.admin.role == 'none'"> Manager</button>
  </td>
</tr>

I am getting user.admin is null

Answer 1

Something like following?

 new Vue({ el: '#demo', data() { return { users: [{ "id": "1f7524c5-108e-4f33-a58e-1b8efbbac7c", "name": "nwafor nnamdi", "email": "nna@gmail.com", "phone": "+2348032547845", "admin": { "id": "1f0e88a1-ac3d-480f-b8ca-e3c2481039c7", "user_id": "1f7524c5-108e-4f33-a58e-1b8efbbac7c", "role": "manager", "created_at": "2021-12-31T10:35:10.000000Z", "updated_at": "2021-12-31T11:08:51.000000Z", "deleted_at": null } }, { "id": "jduw-dieke-9e8ej-eje8-ej383j", "name": "admin", "email": "admin@gmail.com", "phone": "08032547856", }] } } })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="demo"> <table> <tr v-for="(user, index) in users":key="index"> <td>{{ user.name }}</td> <td> <button id="make-admin" @click="changeRole('none')" v-if="user.admin?.role == 'manager'"> Remove Manager</button> <button id="make-admin" @click="changeRole('manager')" v-else-if="user.admin?.role == 'super'"> Remove Super Admin</button> <button id="make-admin" @click="changeRole('super')" v-if="user.admin?.role == 'none'"> Super Admin</button> <button id="make-admin" @click="changeRole('super')" v-if="user.admin?.role == 'none'"> Manager</button> </td> </tr> </table> </div>