Displaying specific data from a CSV file

JavaScript
1

I want to display specific fields from an external CSV file on a web site with using JavaScript. I tried to parse that file with using “Papa parse” like this: http://jsbin.com/weqiviguci/1/edit?html,js,console,output

How can I display a specific data from this data set in a web site like:

Battery Level: 0.62

Altimeter Pressure: 99.44185

Horizontal Accuracy: 65

Can you give me an example in JSBin or JSfiddle?

2

I’m not able to access the CSV file where I am currently (maybe not anywhere else either, depending on how DropBox permissions are set). Can you show us a sample of the data it contains?

3

Array.map()

but even without previous data mapping you would just have to access the properties you’re interested in. the remainder is just standard DOM manipulation.

4

I think there is no problem with permissions. Try this link: https://www.dropbox.com/s/wsnizh4lyugxd60/data.csv?dl=0

5

Thanks. I’ll have a look when I get home - chances are it’s blocked here as ‘file sharing’

6

The following script uses a jQuery component to create a table on your HTML page. At the moment it parses the whole file. You may wish to limit its output by modifying the script.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>CSV Parser</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js" type="text/javascript">
</script>
<style type="text/css">
body { font-family:arial, helvetica, sans-serif; font-weight:normal; font-size:13px; color:#000; text-align:left; margin:3px 0px; }
#wrap { width:500px; height:500px; margin:20px;  }
</style>
</head>

<body>

<div id="wrap">
</div>
<!-- end wrap -->
<script type="text/javascript">
 $.get('data.csv', function(data) {
	var build = '<table border="1" cellpadding="2" cellspacing="0" style="border-collapse: collapse" width="100%">\n';
	var rows = data.split("\n");
	rows.forEach( function getvalues(thisRow) {
	build += "<tr>\n";
	var columns = thisRow.split(",");
	for(var i=0;i<columns.length;i++){ build += "<td>" + columns[i] + "</td>\n"; }   			
	build += "</tr>\n";
	})
	build += "</table>";
	$('#wrap').append(build);	
 });</script>

</body>

</html>

You will need to put the data.csv file into the same folder as the HTML page running this script.
You will also need to put both the HTML page and the data.csv file on the internet to avoid errors that occur when you try it out with local files. I found that with local files it would only work in Safari. All other browsers gave cross origin request errors.

7

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.