Is there a way to solve this problem by using .forEach or .map instead of for-loop?

In some near future maybe you could use Object.fromEntries(). It is supported on some browsers version right now: Browser Compatibility:

var arr = [
  [
    ['firstName', 'Joe'],
    ['lastName', 'Blow'],
    ['age', 42],
    ['role', 'clerk']
  ],
  [
    ['firstName', 'Mary'],
    ['lastName', 'Jenkins'],
    ['age', 36],
    ['role', 'manager']
  ]
];

console.log(arr.map(Object.fromEntries));
.as-console {background-color:black !important; color:lime;}
.as-console-wrapper {max-height:100% !important; top:0;}


You could map new objects by mapping the properties and join all properties to a single objects.

var data = [[['firstName', 'Joe'], ['lastName', 'Blow'], ['age', 42], ['role', 'clerk']], [['firstName', 'Mary'], ['lastName', 'Jenkins'], ['age', 36], ['role', 'manager']]],
    result = data.map(a => Object.assign(...a.map(([key, value]) => ({ [key]: value }))));
    
console.log(result);
.as-console-wrapper { max-height: 100% !important; top: 0; }