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

I have updated my question. Users is an array of user objects @ParthPatel — etranz, Dec 31 '21 at 12:52
You will get exactly what you have. If user.admin === null this means it's really null, and your assumptions on data are wrong. If the problem persists, please, provide a way to reproduce the problem, see https://stackoverflow.com/help/mcve — Estus Flask, Dec 31 '21 at 12:52
Does this answer your question? [Detecting an undefined object property](https://stackoverflow.com/questions/27509/detecting-an-undefined-object-property) — Mark Baijens, Dec 31 '21 at 12:55
Your users array is not that you think. First, that json in your question, is bad formed, so probably you write for your own. As @ParthPatel said, print user object. — Kalamarico, Dec 31 '21 at 12:58
@Kalamarico I have updated my question with the correct array object — etranz, Dec 31 '21 at 13:10
I think, in that "v-for" you are not iterating over your "data" array inside that json. In your definition of "users", try to add a console.log trace and display this variable — Kalamarico, Dec 31 '21 at 13:14
@Kalamarico I have changed it to users but I am getting the same error — etranz, Dec 31 '21 at 13:19
@etranz I think you are confused with the "data" object of vue components, if you provide, uploading your code, a link where we saw and reproduce the problem, we could help you — Kalamarico, Dec 31 '21 at 13:22
@etranz or try to share all the code of your Vue component in your question (if it's possible of course). I'm thinking that your problem solves very easy — Kalamarico, Dec 31 '21 at 13:28

score 1 · Answer 1 · answered Dec 31 '21 at 13:31

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>

how to check if admin exist in json

1 Answers1