json2html - 将 JSON 转换为 HTML
json2html 是一个 JavaScript 库,用于将 JSON 数据转换为 HTML。以下是一个简单的示例,展示如何使用 json2html 将 JSON 数据转换为 HTML 表格。
首先,确保在您的项目中包含 json2html 库。您可以通过 npm 安装它:
npm install json2html
然后,在您的 JavaScript 文件中,使用如下方式:
// 引入 json2html
const json2html = require('json2html');
// 示例 JSON 数据
const jsonData = [
{ name: "Alice", email: "alice@example.com" },
{ name: "Bob", email: "bob@example.com" }
];
// 转换 JSON 到 HTML
const html = json2html.transform(jsonData, {
tag: 'table',
children: [
{
tag: 'tr',
children: [
{ tag: 'th', text: 'Name' },
{ tag: 'th', text: 'Email' }
]
},
{
tag: 'tr',
repeat: '${item}',
children: [
{ tag: 'td', text: '${item.name}' },
{ tag: 'td', text: '${item.email}' }
]
}
]
});
// 输出 HTML
console.log(html);
这段代码定义了一个 JSON 数据数组,并使用 json2html 将其转换为一个 HTML 表格。transform
方法的第二个参数是一个配置对象,它定义了如何将 JSON 数据转换为 HTML 元素。在这个例子中,我们创建了一个 table
,然后添加一个表头行,接着使用 repeat
指令来为每个数据项创建一个新行。每个单元格中的文本使用了数据绑定表达式 ${item.name}
和 ${item.email}
来填充。
评论已关闭