display contents of csv file in html page
Question
I have a standalone HTML page (no webserver) and I'm after some javascript code that will display the contents of a .csv file in the page.
The .csv file contains a list of usernames that I would like to be displayed. I'm doing it this way as the people that need to update the list know nothing of HTML and initially thought this would be an easier way to do it.
All the code snippets that I have found either try to upload a file and then only display the contents till you reload the page again or I don't have enough knowledge to tweak the code to work.
Any help appreciated & TYIA
Andy
@Barthy code that is very close to what I would like is this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
table {
border-collapse: collapse;
border: 2px black solid;
font: 12px sans-serif;
}
td {
border: 1px black solid;
padding: 5px;
}
</style>
</head>
<body>
<div id='container'></div>
<script type="text/javascript"charset="utf-8">
var data = 'heading1,heading2,heading3,heading4,heading5\nvalue1_1,value2_1,value3_1,value4_1,value5_1\nvalue1_2,value2_2,value3_2,value4_2,value5_2';
var lines = data.split("\n"),
output = [],
i;
for (i = 0; i < lines.length; i++)
output.push("<tr><td>"
+ lines[i].slice(0,-1).split(",").join("</td><td>")
+ "</td></tr>");
output = "<table>" + output.join("") + "</table>";
var div = document.getElementById('container');
div.innerHTML = output;
</script>
</body>
</html>
but would like to get data from CSV file
@cars10 example of what is in the csv file:
Heading_1,Heading_2,Heading_3,Heading_4
John, Smith, 29, Male
Andy, Jones, 32, Male
Abbey, Stewart, 35, Female
if that helps
Solution so far:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
table {
border-collapse: collapse;
border: 2px black solid;
font: 12px sans-serif;
}
td {
border: 1px black solid;
padding: 5px;
}
</style>
<script>
window.onload=function(){ with (new XMLHttpRequest()) {
onreadystatechange=cb; open('GET','data.csv',true); responseType='text';send();
}}
function cb(){if(this.readyState===4)document.getElementById('main')
.innerHTML=tbl(this.responseText); }
function tbl(csv){ // do whatever is necessary to create your table here ...
return csv.split('\n')
.map(function(tr,i){return '<tr><td>'
+tr.replace(/\t/g,'</td><td>')
+'</td></tr>';})
.join('\n'); }
</script>
</head>
<body>
<h2>Hey, this is my fabulous "dynamic" html page!</h2>
<table id="main"></table>
</body>
</html>
1 answers
solution1
4 ACCPTED 2017-08-01 15:28:51
Here is a complete working example (works even on a local directory, ie no web server at all!). This is a plain JavaScript solution. Personally, I would always use jquery, but in this simple case you can do without it.
The page expects the csv-file ("csv.txt") in the same directory. But it is up to you to specify another (relative) path in the oReq.open() line.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
window.onload=function(){ with (new XMLHttpRequest()) {
onreadystatechange=cb; open('GET','csv.txt',true); responseType='text';send();
}}
function cb(){if(this.readyState===4)document.getElementById('main')
.innerHTML=tbl(this.responseText); }
function tbl(csv){ // do whatever is necessary to create your table here ...
return csv.split('\n')
.map(function(tr,i){return '<tr><td>'
+tr.replace(/\t/g,'</td><td>')
+'</td></tr>';})
.join('\n'); }
</script>
</head>
<body>
<h2>Hey, this is my fabulous "dynamic" html page!</h2>
<table id="main"></table>
</body>
</html>
I got my inspiration from here: Javascript - read local text file .
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.