How to merge 2 array objects with different key’s name in Javascript?

I would like to merge obj1 and obj2 if they share the same role id.

if obj1.roleId is equal to obj2.id

this.state = {
  obj1: [{
    "firstName": "Sally",
    "id": 2635,
    "roleId": 1
  }, {
    "firstName": "Dylan",
    "id": 2636,
    "roleId": 2
  }, {
    "firstName": "Tom",
    "id": 2637,
    "roleId": 3
  }],
  obj2: [{
    "name": "Supervisor",
    "id": 2,
  }, {
    "name": "Developer",
    "id": 1,
  }, {
    "name": "Quality Assurance",
    "id": 3,
  }]
}

into something like this, where I can rename the key’s name from obj2:

obj3: [{
    "firstName": "Sally",
    "id": 2635,
    "roleId": 1,
    "roleName": "Developer",
  }, {
    "firstName": "Dylan",
    "id": 2636,
    "roleId": 2,
    "roleName": "Supervisor",
  }, ...]

Please give me a hand if possible. Many thanks.

Answer

Is this what you are looking for?

var obj3 = [];
for(var i = 0; i < state.obj1.length; i++){
  for(var p = 0; p < state.obj2.length; p++){
    if(state.obj1[i].roleId == state.obj2[p].id){
      obj3.push({"firstName": state.obj1[i].firstName,
      "id": state.obj1[i].id,
      "roleId": state.obj1[i].roleId,
      "roleName": state.obj2[p].name})
    }
  }
}

console.log(obj3);