CsV to javascript array

Rory Barrett · 10-01-2012, 05:10 PM

Hello Colleagues

I joined this forum yesterday. I am keen to be able to read a csv file in the same folder as my html and create a javascript array with it. I have successfully used a jquery function that puts a table on the html with the csv showing however it would be useful to create an array with this data.The code I used to accomplish this is shown below.

<title>jQuery CSVToTable</title>
<link rel="stylesheet" href="css/csvtable.css" type="text/css" />
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery.csvToTable.js"></script>

<script>
$(function() {
$.get('11MTC_BB_09.csv', function(data) {
$('#CSVSource').html('<pre>' + data + '</pre>');
});

$('#CSVTable').CSVToTable('11MTC_BB_09.csv', { loadingImage: 'images/loading.gif', startLine: 0 });

});

</script>

I thought I had asked this question yesterday but it has not appeared in the forums yet.

Rory Barrett

DrDOS · 10-01-2012, 05:32 PM

Do you have a server side language that can read the .csv file?
Most can, just have it write the .js file for you. If you have .php,
the most common server side language, it can handle .csv files
very well.

xelawho · 10-01-2012, 05:33 PM

actually, your question is here

but anyway. This is a simple AJAX request and there is no need to use jQuery if all you want is the data in an array. You may find it better to build your own array-to-table code, depending on what your needs are.

Here's how you'd do it in plain javascript. The items in the csv file go into an array called "deets" (although you will have to check how exactly your csv file is saved,. and that will dictate how you should split the response text). Here they are just printed out into a div, but you can do what you like with them...

Code:

<body>
<div id="results"></div>
<script type="text/javascript">
var deets=[];
function getData(callback) {
var url="11MTC_BB_09.csv"
var csvFile = window.XMLHttpRequest?new XMLHttpRequest:new ActiveXObject('Microsoft.XMLHTTP');
	csvFile.onreadystatechange = function() {
   if (csvFile.readyState == 4) {
     callback(csvFile, csvFile.status);
   }
 };
csvFile.open("GET", url, true); 
csvFile.send(null);
}


getData(function(data) {
  deets = data.responseText.split(/\n/);
  for (var i = 0; i < deets.length; i++) {
  document.getElementById("results").innerHTML+=deets[i]+"<br>"
	}
  });
</script>
</body>

VIPStephan · 10-02-2012, 12:39 AM

Quote:

Originally Posted by xelawho

actually, your question is here

I’ve closed that one to not let a double conversation lead to confusion.