how to handle nested objects in vuex-orm

i have this object:

userRights

{
  "admin": true,
  "rights": [
    {
      "id": 1,
      "value": true
    },
    {
      "id": 2,
      "value": true
    },
    {
      "id": 3,
      "value": true
    },
    {
      "id": 4,
      "value": true
    },
    {
      "id": 5,
      "value": true
    },
    {
      "id": 6,
      "value": true
    },
    {
      "id": 7,
      "value": true
    }
  ]
}

the value should get mapped with the mapped id into this array of objects:

rights

[
  {
    idModule: 1,
    name: 'admin.rights',
    caption: 'Rechte verwalten',
    default: false,
    id: 1,
  },
  {
    idModule: 1,
    name: 'reports',
    caption: 'Reports einsehen',
    default: false,
    id: 2,
  },
  {
    idModule: 1,
    name: 'admin.maintenance',
    caption: 'Wartungsarbeiten durchführen',
    default: false,
    id: 3,
  },
  {
    idModule: 2,
    name: 'users',
    caption: 'Benutzer einsehen',
    default: false,
    id: 4,
  },
  {
    idModule: 2,
    name: 'users.write',
    caption: 'Benutzer anlegen, ändern',
    default: false,
    id: 5,
  },
  {
    idModule: 2,
    name: 'users.passwords',
    caption: 'Benutzer-Passwörter ändern',
    default: false,
    id: 6,
  },
  {
    idModule: 2,
    name: 'users.delete',
    caption: 'Benutzer löschen',
    default: false,
    id: 7,
  },
];

the id inside userRights.rights should mapped with the id of rights[0].id and then should create a new element as value: true/false inside the rights array of objects.

atm i do this but i am stuck:

rights.js

import { Model } from '@vuex-orm/core';
import userRights from './userRights';

export default class Right extends Model {
  static entity = 'right';

  static fields() {
    return {
      id: this.attr(null),
      idModule: this.attr(null),
      name: this.attr(''),
      caption: this.attr(''),
      default: this.attr(null),
      value: this.belongsTo(userRight, 'rights.value'),
    };
  }
}

-----------------------------------
userRights.js

import { Model } from '@vuex-orm/core';

export default class UserRight extends Model {
  static entity = 'userRight';

  static fields() {
    return {
      admin: this.attr(null),
      rights: this.attr([]),
    };
  }
}

how can i achieve this?

You can make use of map to achieve that.

var userRights = { "admin": true, "rights": [ { "id": 1, "value": true }, { "id": 2, "value": true }, { "id": 3, "value": true }, { "id": 4, "value": true }, { "id": 5, "value": true }, { "id": 6, "value": false }, { "id": 7, "value": true } ]}

var rights = [ { idModule: 1, name: 'admin.rights', caption: 'Rechte verwalten', default: false, id: 1, }, { idModule: 1, name: 'reports', caption: 'Reports einsehen', default: false, id: 2, }, { idModule: 1, name: 'admin.maintenance', caption: 'Wartungsarbeiten durchführen', default: false, id: 3, }, { idModule: 2, name: 'users', caption: 'Benutzer einsehen', default: false, id: 4, }, { idModule: 2, name: 'users.write', caption: 'Benutzer anlegen, ändern', default: false, id: 5, }, { idModule: 2, name: 'users.passwords', caption: 'Benutzer-Passwörter ändern', default: false, id: 6, }, { idModule: 2, name: 'users.delete', caption: 'Benutzer löschen', default: false, id: 7}];

result = rights.map(val=>{
  val.value = userRights.rights.find(k=>k.id==val.id).value;
  return val;
});

console.log(result);