对于学校项目,我想创建一个网站,该网站会随机生成一件艺术品(来自特定画廊网站)、其对应的 URL 和关键字。我考虑过使用一些 javascript 从 CSV 文件导入数据。
CSV 包含三个不同的列:“艺术品名称/标题”、“URL”、“关键字”。
我设法解析了它,但不知道如何解决其余的问题(随机选择 CSV 的一行并将信息实现到 HTML DOM 中)。
我使用带有 JS 的 FetchAPI
和 Split
函数来解析它。
提前致谢。
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
</head>
<body>
<h1 id="id001" >Artwork Name</h1> <!-- Here is where i'd like to place the artwork name -->
<h2 id="id002" >URL</h2> <!-- Here is where i'd like to place the corresponding URL -->
<h3 id="id003">Keywords</h3> <!-- Here is where i'd like to place the corresponding keywords -->
<script type="text/javascript">
getData();
async function getData() {
const response = await fetch('test.csv');
const data = await response.text();
console.log(data);
const table = data.split('\n').slice(1);
table.forEach(row => {
const columns = row.split(',');
const title = columns[0]
const url = columns[1]
const keywords = columns[2]
console.log(title, url, keywords)
})
}
</script>
</body>
</html>