get variable from csv file for HTML code using Javascript or jquery function

Question

I want to have different numbers in my html code depending on a .csv file, so I want to be able to grab data from a .csv file to an html page using jquery or java script. I thought I found a webpage that shows how to do this in Jquery, but I can not figure it out. This webpage is at: http://code.google.com/p/jquerycsvtotable/ On the left side of this webpage there is even a download .zip file that should give me a working model of what this site describes, with even the final index.html file, but I can not get it to work. Could someone please show me what has changed or what I am doing wrong? Please, show me what I need to do to get this to work or give me another small example. I am new to JavaScript and Jquery.

( I finaly decided to post this question with this example page because this is the closest answer I have found to my question) thanks Tom,

Jay here is the code:

I have made sure JavaScript is enabled on the firefox brozer I use to test my file and I have a test.csv file sitting in the directory. This actually gives me the same result as if I download the .zip file from the left side of the website. It gives me an .html page with a link to a test.csv file which I can download, but it does not use the data in the code to make a table or do anything else?

thanks, tom enter code here

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <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 type="text/javascript" src="js/jquery.tablesorter.dev.js"></script>

    <script>
    $(function() {
        $.get('test.csv', function(data) {
            $('#CSVSource').html('<pre>' + data + '</pre>');
        });
        $('#CSVTable').CSVToTable('test.csv', { loadingImage: 'images/loading.gif', startLine: 0 });
        $.get('test.tsv', function(data) {
            $('#TSVSource').html('<pre>' + data + '</pre>');
        });
        $('#TSVTable').CSVToTable('test.tsv', { loadingText: 'Loading TSV Data...', loadingImage: 'images/loading.gif', startLine: 0, separator: "\t" });
        $('#CSVTable2').CSVToTable('test.csv', { loadingImage: 'images/loading.gif', startLine: 1, headers: ['Album Title', 'Artist Name', 'Price ($USD)'] }).bind("loadComplete",function() { 
            $('#CSVTable2').find('TABLE').tablesorter();
        });;
    });
    </script>
</head>
<body>

<a href="http://code.google.com/p/jquerycsvtotable/">[back to google code...]</a>
<br><br>

This is a test of the CSVToTable plugin.
<br><br>
Original CSV Source of <a href="test.csv">test.csv</a>:<br>
<div id="CSVSource" style="background-color: #FAFAFA; border: 1px solid #999999">
</div>

<br><br>
CSV To Table:<br>
<div id="CSVTable">

</div>


CSV To Table2:<br>
<div id="CSVTable2">

</div>

   </body>
</html>

Show us the code that you have tried and explain how it didn't work. — Jay Blanchard
– Jay Blanchard, Commented May 22, 2014 at 20:36

Moby's Stunt Double · Accepted Answer · 2014-05-22 21:20:12Z

1

A few general things to check:

Keep your console open in dev tools of your choice, ensure there are no Javascript errors occurring.
Again inside your dev tools, go to your network tab and look at the raw response that is being retrieved when the $.get occurs. Is it even able to retrieve it?
Check that your server is able to serve .csv files. It may be locked down to only serve certain mime types.

Without more info, it's hard to give you a more formal answer. Good luck with your app.

answered May 22, 2014 at 21:20

Moby's Stunt Double

2,5401 gold badge18 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

get variable from csv file for HTML code using Javascript or jquery function

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related