从存储在 csv、xml 或 json 中的数据生成 HTML 代码答案

【问题标题】：Generate HTML code from data stored in csv, xml or json从存储在 csv、xml 或 json 中的数据生成 HTML 代码
【发布时间】：2016-09-28 17:55:50
【问题描述】：

我所拥有的：一个 csv（可以转换为 xml 或可能转换为 json）文件，它有很多行，每行包含几列，用于存储有关某些配置文件的数据。

我需要做的事情：根据 html 元素的布局自动生成与每一行对应的 html 页面。由于我可能有数百行并且所有页面都有相同的 html 元素（我的意思是，像 imdb 或 facebook 个人资料），除了向用户显示的唯一个人资料数据，稍后对页面布局的小改动将需要几天的愚蠢手册工作。

是否有某种框架可以做我想做的事情？谢谢！

【问题讨论】：

标签： javascript html json xml csv

【解决方案1】：

过程

您需要三个步骤：

1) 使用Ajax 从您的服务器获取数据并将其转换为数组。你可以这样做，例如。使用以下 jQuery ：

$.ajax({
    type: "GET",
    url: "data.csv",
    success: CSVToHTMLTable
});

2) 获得文件后，您需要对其进行解析。 Json 和 XML 支持在 JavaScript 中是原生的。对 CSV 文件执行此操作的一种简单可靠的方法是使用像 Papa Parse 这样的库：

var data = Papa.parse(data).data;

3) 您需要定义一个函数来将您的数组转换为 HTML 表格。以下是使用 jQuery 执行此操作的方法：

function arrayToTable(tableData) {
    var table = $('<table></table>');
    $(tableData).each(function (i, rowData) {
        var row = $('<tr></tr>');
        $(rowData).each(function (j, cellData) {
            row.append($('<td>'+cellData+'</td>'));
        });
        table.append(row);
    });
    return table;
}

把所有东西放在一起

以下是您可以将所有内容放在一起的方法：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/4.1.2/papaparse.js"></script>
<script>
    function arrayToTable(tableData) {
        var table = $('<table></table>');
        $(tableData).each(function (i, rowData) {
            var row = $('<tr></tr>');
            $(rowData).each(function (j, cellData) {
                row.append($('<td>'+cellData+'</td>'));
            });
            table.append(row);
        });
        return table;
    }

    $.ajax({
        type: "GET",
        url: "http://localhost/test/data.csv",
        success: function (data) {
            $('body').append(arrayToTable(Papa.parse(data).data));
        }
    });
</script>

【讨论】：

感谢您的回答，但这可能不是我想要的。我想我刚刚找到了我想要的。似乎存在一种非常流行的语言，称为 Jade 或最近的 Pug，可以从数据生成 html 页面。我会阅读更多相关信息，并为任何感兴趣的人发布答案。

【解决方案2】：

如果您可以将 csv 转换为 json，我建议您使用 json2html。

【讨论】：