How to create a table with Javascript and/or JQuery dynamicaly from an Object?

var arr = [{
  "M": "52800",
  "Code": "093",
  "A": 1
}, {
  "M": "52800",
  "Code": "050",
  "A": 2
}, {
  "M": "56301",
  "Code": "093",
  "A": 3
}, {
  "M": "57401",
  "Code": "060",
  "A": 1
}, {
  "M": "57401",
  "Code": "090",
  "A": 5
}, {
  "M": "57401",
  "Code": "093",
  "A": 3
}, {
  "M": "57401",
  "Code": "080",
  "A": 5
}];

//distinct M values for rows
const rows = [...new Set(arr.map(item => item.M))];
//distinct Code values for columns
const cols = [...new Set(arr.map(item => item.Code))];


let table = document.createElement("table");
let tableHead = document.createElement("thead");

let head = "<tr><th>M</th>";
//populate header row with values in cols array
cols.forEach(col => head += "<th>" + col + "</th>");
head += "</tr>";
tableHead.innerHTML = head;

let tableBody = document.createElement("tbody");
//body will contain table rows
let body = "";
rows.forEach((row, index) => {
  //open table row and add value from rows array
  body += "<tr><td>" + row + "</td>";
  //populate row with corresponding values or empty cell
  cols.forEach(col => {
    //try to find if there is a "A" value associated with current col and row
    let value = arr.find(el => el.M === row && el.Code === col);
    let cell = value ? value.A : "";
    body += "<td>" + cell + "</td>";
  });
  body += "</tr>";
});
tableBody.innerHTML = body;

table.appendChild(tableHead);
table.appendChild(tableBody);

document.body.appendChild(table);

table, th, td {
  border: solid 1px black;
}