Skip to content

Instantly share code, notes, and snippets.

@stephanbogner

stephanbogner/index.html

Created January 21, 2021 13:35
Show Gist options
  • Save stephanbogner/7bfb65d7b6bef08877b85f3e571cb3d4 to your computer and use it in GitHub Desktop.
Save stephanbogner/7bfb65d7b6bef08877b85f3e571cb3d4 to your computer and use it in GitHub Desktop.
Download ZIP
My simple template/boilerplate/skeleton/foundation/... for parsing CSV data with javascript (via PapaParse) to e.g. do some quick data analysis
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Data analysis</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/5.3.0/papaparse.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<div id="output">Processing file</div>
<script type="text/javascript">
init('test_data.csv')
function init(url){
Papa.parse(url,{
download: true,
header: true,
error: function(error) {
console.log('Tip: Make sure you serve locally – e.g. via https://github.com/vercel/serve');
console.log('Error', error);
$('#output').html('Error – check console');
},
complete: function(results, file) {
console.log('Results', results);
workWithData(results.data);
}
})
}
function workWithData(data){
console.log(data);
let dom = '';
for (var i = 0; i < data.length; i++) {
const row = data[i];
dom += '<div>' + JSON.stringify(row) + '</div>';
}
$('#output').html(dom);
}
</script>
</body>
</html>
Raw
test_data.csv
We can make this file beautiful and searchable if this error is corrected: No commas found in this CSV file in line 0.
Name;Year;Company
Michael;2008;Notion
Robin;2010;Laserhub
Kim;2004;Pitch
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment