For a school project, I would like to create a website that randomly generates an artwork (from a specific gallery website), its corresponding URL and keywords. I thought about importing data from a CSV file with some javascript.
The CSV has three different columns: "Artwork Name/Title", "URL", "Keywords".
I managed to parse it but don't know how to tackle the rest (picking randomly one of the rows of the CSV and implementing the information into the HTML DOM).
I used the FetchAPI with JS and Split function to parse it.
Thank you in advance.
<!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>
Aucun commentaire:
Enregistrer un commentaire