我想制作一个随机艺术品生成器并将其实现为 HTML

时间:2021-05-15 10:58:13

标签: javascript html csv random fetch

对于学校项目,我想创建一个网站,该网站会随机生成一件艺术品(来自特定画廊网站)、其对应的 URL 和关键字。我考虑过使用一些 javascript 从 CSV 文件导入数据。

CSV 包含三个不同的列:“艺术品名称/标题”、“URL”、“关键字”。

我设法解析了它,但不知道如何解决其余的问题(随机选择 CSV 的一行并将信息实现到 HTML DOM 中)。

我使用带有 JS 的 FetchAPISplit 函数来解析它。

提前致谢。

<!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>

0 个答案:

没有答案