How to compare two array objects and populate data in first array in vue.js

Question

I have two array objects defaultPermissions and userPermissions. defaultPermissions contains all the permission with default value as 0 for read, write, update, delete. userPermissions contains data for which the users has been given permission for.

I have a table with permission name and checkbox for each operation. If the users has been given a permission for read, write, update, delete of the respective PemissionName then the checkbox should be checked else it should be unchecked.

I have done by hardcoding the userPermissions and it is working, but my problem is if in future a new PermisssionName is added then I will have to hard code it again which is not the correct way.

Whenever any new PermisisonName is added it should dynamically be shown as checked or unchecked for each user.

Any suggestion on how this can be done - Thank You.

First array:

defaultPermissions : [
    {'permission_name':'PermissionName1', 'read':0, 'write':0, 'update':0, 'delete':0},
    {'permission_name':'PermissionName2', 'read':0, 'write':0, 'update':0, 'delete':0},
    {'permission_name':'PermissionName3', 'read':0, 'write':0, 'update':0, 'delete':0},
    {'permission_name':'PermissionName4', 'read':0, 'write':0, 'update':0, 'delete':0},
    {'permission_name':'PermissionName5', 'read':0, 'write':0, 'update':0, 'delete':0},
    {'permission_name':'PermissionName6', 'read':0, 'write':0, 'update':0, 'delete':0},
    {'permission_name':'PermissionName7', 'read':0, 'write':0, 'update':0, 'delete':0},
    {'permission_name':'PermissionName8', 'read':0, 'write':0, 'update':0, 'delete':0},
    {'permission_name':'PermissionName9', 'read':0, 'write':0, 'update':0, 'delete':0},
    {'permission_name':'PermissionName10', 'read':0, 'write':0, 'update':0, 'delete':0},

]

Second array:

userPermissions:[
    {'permission_name':'PermissionName1', 'read':1, 'write':1, 'update':1, 'delete':1},
    {'permission_name':'PermissionName2', 'read':1, 'write':1, 'update':1, 'delete':1},
    {'permission_name':'PermissionName3', 'read':1, 'write':1, 'update':1, 'delete':1},
    {'permission_name':'PermissionName4', 'read':1, 'write':1, 'update':0, 'delete':0},
    {'permission_name':'PermissionName5', 'read':1, 'write':1, 'update':0, 'delete':0},
    {'permission_name':'PermissionName6', 'read':0, 'write':0, 'update':0, 'delete':0},
    {'permission_name':'PermissionName7', 'read':0, 'write':0, 'update':0, 'delete':0},
    {'permission_name':'PermissionName8', 'read':0, 'write':0, 'update':0, 'delete':0},
    {'permission_name':'PermissionName9', 'read':1, 'write':1, 'update':1, 'delete':1},
    {'permission_name':'PermissionName11', 'read':1, 'write':1, 'update':1, 'delete':1},
]

Table row code for display all the PermissionName along with respective operations as checked or unchecked

<tr v-for="(item,index) in defaultPermissions" :key="index">
    <td> {{ item.resourceName }}</td>
    <td> <input type="checkbox" v-model=" item.read " class="form-control"/></td>
    <td> <input type="checkbox" v-model=" item.write " class="form-control"/></td>
    <td> <input type="checkbox" v-model=" item.update " class="form-control"/></td>
    <td> <input type="checkbox" v-model=" item.delete " class="form-control"/></td>
</tr>

So userPermissions array could have less objects than defaultPermissions, that's your problem, right? — Styx
– Styx, Commented May 24, 2021 at 20:00
yes, but the table which displays the permissions should contain all the objects of defaultPermissions and the operation checkbox must be checked if it is true in userPermissions — Anji
– Anji, Commented May 24, 2021 at 20:04

Styx · Accepted Answer · 2021-05-24 21:18:24Z

First, you have to get merged permission arrays, e.g. defaultPermissions with userPermissions over it:

computed: {
  permissions() {
    const uperms = this.userPermissions
      .reduce((acc, u) => ({ ...acc, ...{ [u.permission_name]: u } }), {});
    return this.defaultPermissions
      .map((d) => ({ ...d, ...(uperms[d.permission_name] || {}) }));
  },
},

Next, you have to properly handle checkbox changes:

<tr v-for="item in permissions" :key="item.permission_name">
  <td> {{ item.permission_name }}</td>
  <td v-for="perm in ['read', 'write', 'update', 'delete']"
      :key="`${item.permission_name}-${perm}`">
    <input type="checkbox" class="form-control"
           :checked="item[perm]"
           @change="setPerm(item.permission_name, perm, $event.target.checked)"/>
  </td>
</tr>

methods: {
  setPerm(permission_name, perm, val) {
    const uperm = this.userPermissions
      .find((p) => p.permission_name === permission_name);
    if (uperm == null) {
      this.userPermissions.push({
        permission_name,
        read: 0, write: 0, update: 0, 'delete': 0,
        ...{ [perm]: val|0 },
      });
    } else {
      uperm[perm] = val|0;
    }
  },
},

That's all. Optionally, you'd want to remove empty permissions from userPermissions before saving them:

const filteredPerms = this.userPermissions
  .filter((u) => (u.read || u.write || u.update || u.delete));

Igor Moraru · Accepted Answer · 2021-05-24 20:25:47Z

1

You can map the defaultPermissions, and assign the values of user permission, whenever such a permission exists. When userPermission does not exists assign an empty object (only to get a one line solution):

defaultPermissions = defaultPermissions.map(perm => {
   return Object.assign(perm, userPermissions.find(u => u.permission_name === perm.permission_name) || {})
})

answered May 24, 2021 at 20:25

Igor Moraru

7,7491 gold badge15 silver badges28 bronze badges

Collectives™ on Stack Overflow

How to compare two array objects and populate data in first array in vue.js

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related