如何用JavaScript遍历JSON数组并灵活生成可复用表格行

问题场景 #

现有不同结构的JSON数组，需要循环生成表格行，但原方法硬编码属性名，无法复用：

示例数据1：

var data = [
   {foo1:"a",foo2:"b",foo3:"c"},
   {foo1:"d",foo2:"e",foo3:"f"},
   {foo1:"g",foo2:"h",foo3:"i"}
]

原无法复用的实现：

$.each(data, function (key, value) {
    rows += "<tr id=" + key + "><td>" + value.foo1+ "</td><td>" + value.foo2+ "</td><td>" + value.foo3+    "</td></tr>";
});

需要适配的其他结构JSON数组：

var dataNew = [
   {lorem1:"j",lorem2:"k",lorem3:"l"},
   {lorem1:"m",lorem2:"n",lorem3:"o"},
   {lorem1:"p",lorem2:"q",lorem3:"r"},
   {lorem1:"x",lorem2:"s",lorem3:"t"},
   {lorem1:"w",lorem2:"y",lorem3:"z"}
]

通用解决方案 #

核心逻辑是动态遍历对象属性，不再硬编码属性名，适配任意结构的JSON数组。

方法1：原生JavaScript实现 #

function generateTableRows(data) {
    let rows = '';
    if (!data || data.length === 0) return rows;
    
    data.forEach((item, index) => {
        let cells = '';
        // 遍历当前对象的所有属性值，生成单元格
        Object.values(item).forEach(value => {
            cells += `<td>${value}</td>`;
        });
        rows += `<tr id="${index}">${cells}</tr>`;
    });
    return rows;
}

// 使用示例
const rows1 = generateTableRows(data);
const rows2 = generateTableRows(dataNew);

方法2：jQuery兼容版本 #

function generateTableRows(data) {
    let rows = '';
    if (!data || data.length === 0) return rows;
    
    $.each(data, function(key, value) {
        let cells = '';
        // 遍历对象属性值生成单元格
        $.each(value, function(_, cellValue) {
            cells += `<td>${cellValue}</td>`;
        });
        rows += `<tr id="${key}">${cells}</tr>`;
    });
    return rows;
}

// 使用示例
const rows1 = generateTableRows(data);
const rows2 = generateTableRows(dataNew);

进阶优化：自定义列顺序 #

如果需要指定表格列的展示顺序，可扩展函数传入属性列表：

function generateTableRows(data, propOrder) {
    let rows = '';
    if (!data || data.length === 0) return rows;
    
    // 优先使用传入的属性顺序，默认取第一个对象的属性
    const props = propOrder || Object.keys(data[0]);
    
    data.forEach((item, index) => {
        let cells = '';
        props.forEach(prop => {
            // 处理属性不存在的情况，默认显示空字符串
            cells += `<td>${item[prop] || ''}</td>`;
        });
        rows += `<tr id="${index}">${cells}</tr>`;
    });
    return rows;
}

// 使用示例：指定列顺序为lorem3 -> lorem1 -> lorem2
const customRows = generateTableRows(dataNew, ['lorem3', 'lorem1', 'lorem2']);

内容的提问来源于stack exchange，提问作者Xon Version9