Question

我有一个示例JSON并希望将其转换为表格，但我无法保证列名称。

例如：

{
    "name":"John",
    "age":30,
    "cars":"Ford"
}

或：

{
    "test":"Max",
    "data":"sdfsdfsdf",
    "mad":"hello ",
    "max":"world",
    "sample":"testData",
    "data":"skjdf"
}

第一个应该显示如下表：

Name  Age   Cars
John  30    Ford

我已经浏览过Datatable，它说要添加列标题以获取数据，但我不知道列名，因为它可以是任何内容。

Answer 1

我认为您最安全的选择是创建自己的表，因为大多数库都需要预定义的列列表。您可以尝试以下方法：

function createTable(jsonObj) {
    if (!jsonObj || !jsonObj instanceof Object) {
        return '';
    }
    let table = '<table>';
    let head = '<thead><tr>';
    let body = '<tbody><tr>';
    for(let key in jsonObj) {
        head += `<th>${key}</th>`;
        body += `<td>${jsonObj[key]}</td>`;
    }
    head += '</tr></thead>';
    body += '</tr></tbody>';
    table += `${head}${body}</table>`;
    return table;
}

然后，您可以将结果附加到您想要的任何节点，例如：

$('body').append(createTable({
    "name":"John",
    "age":30,
    "cars":"Ford"
}));

现在，您可以根据自己的喜好使用CSS来设置表格的样式。以codepen为例。

使用动态列将JSON转换为表

1 个答案: