Javascript (VueJS) Object with Array

Question

   {
  "data": {
    "id": 3,
    "name": "random",
    "email": "randon@yahoo",
    "created_at": "2017-02-06 18:16:06",
    "updated_at": "2017-02-06 18:16:06",
    "roles": [
      {
        "id": 1,
        "name": "ADMIN",
        "access": {
          "role4": true,
          "role3": true,
          "role2": true,
          "role1": true
        },
        "created_at": "-0001-11-30 00:00:00",
        "updated_at": "-0001-11-30 00:00:00"
      }
    ]
  }
}

I am trying to access "access" and receive results true/false but it does not work

currentUser.roles[0].access['role1'];

Error: Cannot read property '0' of undefined

but

console.log(currentUser.roles[0].access['role1']); // returns true

and

currentUser.roles // gives me all the roles

The data is passed to the front-end with Laravel Transformer.

Note:Using VueJs and this is inside methods:

Answer 1

Within the VueComponent context, data attributes are spread into its this context. Therefore:

 this.roles[0].access['role1']

Answer 2

Since I don't see whole code, I can assume. First you have match data with

this.currentUser = data //data that you retrieve

and then access it:

this.currentUser.roles[0].access['role1']