how to run a json object in bootstrap-table (key: value)

var objectJson = {
  "SourceFile": "/opt/lampp/htdocs/metaviewer/uploads/2438071792_19ed1df293_o.jpg",
  "ExifToolVersion": 10.8,
  "FileName": "2438071792_19ed1df293_o.jpg",
  "Directory": "/opt/lampp/htdocs/metaviewer/uploads",
  "FileSize": "123 kB",
  "FileModifyDate": "2019:07:01 21:59:19-05:00",
  "FileAccessDate": "2019:07:01 21:59:19-05:00",
  "FileInodeChangeDate": "2019:07:01 21:59:19-05:00",
  "FilePermissions": "rw-r--r--",
  "FileType": "JPEG",
  "FileTypeExtension": "jpg"
}

function responseHanlder(res) {
  var data = [];
  for (var key in res) {
      data.push({
          key: key,
          value: res[key]
      });
  }
  return data;
}

$(function () {
  $('#table').bootstrapTable({
    columns: [{
      field: 'key',
      title: 'key name'
    }, {
      field: 'value',
      title: 'value name'
    }],
      data: responseHanlder(objectJson)
  });
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://unpkg.com/[email protected]/dist/bootstrap-table.min.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/bootstrap-table.min.js"></script>

<table id="table"> </table>