I have two diff API calls with responses as below:

let ar0 =  { 
  "properties": {
    "role": [ "myservice1", "myservice2", "myservice" ],
    "perm": [ "abcd", "defc", "mnop" ]
  }
};

let ar11 = [{ 
  "role": [ "myservice1", "myservice2" ]
}, {
  "perm": [ "abcd", "defc" ]
}];

I need to create a check box for a key like role and keep the common values (from both the arrays) checked and values available in ar0 to be unchecked. ar11 will always have keys available in ar0 and no extras.

I am trying to implement this as below:

Create a new array by using both the the objects like below and iterate over. The checked key is to keep the checkbox checked and unchecked.

let output =  [{ 
  "role": [{ 
    "cname": "myservice1", 
    "ischecked": true 
  }, { 
    "cname": "myservice2", 
    "ischecked": true 
  }, { 
    "cname": "myservice", 
    "ischecked": false 
  }] 
}, { 
  "perm": [{ 
    "cname": "abcd", 
    "ischecked": true 
  }, { 
    "cname": "defg", 
    "ischecked": true 
  }, { 
    "cname": "mnop", 
    "ischecked": false 
  }]
}]

I’m looking for recommendations on how to implement above functionality