我所拥有的:一个包含多行的 csv(可以转换为 xml 或可能转换为 json)文件,每行包含几列,用于存储有关某些配置文件的数据。
我需要做什么:根据给定的 html 元素布局自动生成与每一行相对应的 html 页面。由于我可能有数百行,并且所有页面都有相同的 html 元素(我的意思是,像 imdb 或 facebook 个人资料),除了向用户显示的唯一个人资料数据之外,稍后对页面布局进行小的更改将需要数天愚蠢的手动操作工作。
是否有某种框架可以完成我想要做的事情?谢谢!
最佳答案
流程
您需要三个步骤:
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>
关于javascript - 从 csv、xml 或 json 中存储的数据生成 HTML 代码,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37533518/