Javascript 从对象数组生成HTML表

我一直在尝试生成一个函数，从一个对象数组创建一个HTML表。这是需要制作成表的数组

let units = [
    {
        'code': 'COMP2110',
        'title': 'Web Technology', 
        'offering': 'S1'
    },  
    {
        'code': 'COMP2010',
        'title': 'Algorithms and Data Structures', 
        'offering': 'S1'
    },
    {
        'code': 'COMP2150',
        'title': 'Game Design', 
        'offering': 'S1'
    },
    {
        'code': 'COMP2320',
        'title': 'Offensive Security', 
        'offering': 'S1'
    },
    {
        'code': 'COMP2200',
        'title': 'Data Science', 
        'offering': 'S2'
    },
    {
        'code': 'COMP2250',
        'title': 'Data Communications', 
        'offering': 'S2'
    },
    {
        'code': 'COMP2300',
        'title': 'Applied Cryptography', 
        'offering': 'S2'
    },
    {
        'code': 'COMP2000',
        'title': 'Object-Oriented Programming Practices', 
        'offering': 'S2'
    },
    {
        'code': 'COMP2050',
        'title': 'Software Engineering', 
        'offering': 'S2'
    },
    {
        'code': 'COMP2100',
        'title': 'Systems Programming', 
        'offering': 'S2'
    }
]

我试过一个函数，但不知道如何让它工作。我也不知道如何在函数中进行查询

function unit_table() {
    var totalRows = 3;
    var cellsInRow = 3;

    function drawTable() {
        // get the reference for the body
        var first = document.getElementById('first');

        // creates a <table> element
        var tbl = document.createElement("table");

        // creating rows
        for (var r = 0; r < totalRows; r++) {
            var row = document.createElement("tr");

            // create cells in row
            for (var c = 0; c < cellsInRow; c++) {
                m=0;
                var cell = document.createElement("td");
                var cellText = document.createTextNode(units[n][m]);
                cell.appendChild(cellText);
                row.appendChild(cell);
                m=m+1;
            }           

            n=n+1;
            tbl.appendChild(row); // add the row to the end of the table body
        }

        first.appendChild(tbl); // appends <table> into <first>
    }
    window.onload=drawTable; 
    // your code here
}

功能单元\u表（）{
var totalRows=3；
var-cellsInRow=3；
函数drawTable（）{
//获取主体的引用
var first=document.getElementById（'first'）；
//创建一个元素
var tbl=document.createElement（“表”）；
//创建行
对于（var r=0；r

---

任何帮助都将不胜感激。

这不是多维数组。这是一个对象记录数组

使用类似于

populateTableWithJSON

的函数，您可以用JSON对象列表生成或填充表格

const main=（）=>{
let table=document.querySelector（“#单位”）
let units=getUnits（）
populateTableWithJSON（单位，表格）
}
/**
*@return返回传入的表，
*或新表（如果为空）
*/
常量populateTableWithJSON=（jsonData，表格）=>{
table=table | | document.createElement（'table'）
设thead=table.querySelector（'thead'）
if（thead==null）table.appendChild（createEl（'thead'））
设tbody=table.querySelector（'tbody'）
if（tbody==null）table.appendChild（createEl（'tbody'））
排空装置（t车身）
如果（jsonData！=null&&jsonData.length>0）{
让headers=thead.querySelectorAll（'tr-th'），fields=[]
if（标题.长度）{
fields=Array.from（headers.map）（th=>th.textContent）；
}否则{
fields=Object.keys（jsonData[0]）
thead.appendChild（createEl（'TR'，null，null，…fields.map）（field=>{
返回createEl（'TH'，{textContent:field}）
})))
}
appendAll（tbody，…jsonData.map）（记录=>{
返回createEl（'TR'，null，null，…fields.map（field=>{
返回createEl（'TD'，{textContent:record[field]}）
}))
}))
}
返回表
}
const createl=（标记、道具、属性等子项）=>{
设el=document.createElement（标记）
Object.keys（props | |{}）.forEach（prop=>el[prop]=props[prop]）
Object.keys（attrs |{}）.forEach（attr=>el.setAttribute（attr，attrs[attr]））
返回所有（el，…子项）
}
常量appendAll=（el，…子项）=>{
children.forEach（child=>el.appendChild（child））
返回el
}
常量清空元素=（元素）=>{
while（element.firstChild）element.removeChild（element.firstChild）
}
常量getUnits=（）=>[{
“代码”：“COMP2110”，
“标题”：“网络技术”，
“产品”：“S1”
}, {
“代码”：“COMP2010”，
“标题”：“算法和数据结构”，
“产品”：“S1”
}, {
“代码”：“COMP2150”，
“标题”：“游戏设计”，
“产品”：“S1”
}, {
“代码”：“COMP2320”，
‘标题’：‘进攻性安全’，
“产品”：“S1”
}, {
“代码”：“COMP2200”，
"标题":"数据科学",，
“提供”：“S2”
}, {
“代码”：“COMP2250”，
“标题”：“数据通信”，
“提供”：“S2”
}, {
“代码”：“COMP2300”，
“标题”：“应用密码学”，
“提供”：“S2”
}, {
“代码”：“COMP2000”，
“标题”：“面向对象编程实践”，
“提供”：“S2”
}, {
“代码”：“COMP2050”，
“标题”：“软件工程”，
“提供”：“S2”
}, {
“代码”：“COMP2100”，
“标题”：“系统编程”，
“提供”：“S2”
}]
main（）

表，th，td{
边框：薄实灰色；
}
桌子{
边界塌陷：塌陷；
}
th，td{
填充：0.5em；
}
th{
文本转换：大写；
}

---

这不是多维数组。这是一个对象记录数组

使用类似于

populateTableWithJSON

的函数，您可以用JSON对象列表生成或填充表格

const main=（）=>{
let table=document.querySelector（“#单位”）
let units=getUnits（）
populateTableWithJSON（单位，表格）
}
/**
*@return返回传入的表，
*或新表（如果为空）
*/
常量populateTableWithJSON=（jsonData，表格）=>{
table=table | | document.createElement（'table'）
设thead=table.querySelector（'thead'）
if（thead==null）table.appendChild（createEl（'thead'））
设tbody=table.querySelector（'tbody'）
if（tbody==null）table.appendChild（createEl（'tbody'））
排空装置（t车身）
如果（jsonData！=null&&jsonData.length>0）{
让headers=thead.querySelectorAll（'tr-th'），fields=[]
if（标题.长度）{
fields=Array.from（headers.map）（th=>th.textContent）；
}否则{
fields=Object.keys（jsonData[0]）
thead.appendChild（createEl（'TR'，null，null，…fields.map）（field=>{
返回createEl（'TH'，{textContent:field}）
})))
}
appendAll（tbody，…jsonData.map）（记录=>{
返回createEl（'TR'，null，null，…fields.map（field=>{
返回createEl（'TD'，{textContent:record[field]}）
}))
}))
}
返回表
}
const createl=（标记、道具、属性等子项）=>{
设el=document.createElement（标记）
Object.keys（props | |{}）.forEach（prop=>el[prop]=props[prop]）
Object.keys（attrs |{}）.forEach（attr=>el.setAttribute（attr，attrs[attr]））
返回所有（el，…子项）
}
常量appendAll=（el，…子项）=>{
C
let tableString="<tr>"
for(let column in units[0]){
  tableString+=`<th>${column}</th>`
}

<tr>
<th>code</th>
<th>title</th>
<th>offering</th>
</tr>

tableString+="</tr>"
units.forEach(element => {
    tableString+="<tr>"
    for(let prop in element){
      tableString+=`<td>${element[prop]}</td>`
    }
    tableString+="</tr>"
});

 <tr>
   <td>COMP2110</td>
   <td>Web Technology</td>
   <td>S1</td>
   </tr>
  <tr>...
  </tr>
  <tr>...
  </tr>

 document.querySelector('#tb').innerHTML=tableString;