I'm trying to import a local CSV file with headings into a local HTML file, which will then display as a table in a browser.

I haven't been learning HTMLand JavaScript for long, so I don't know a lot about importing and converting. What I need is some advice or possibly a basic script describing the sort of function I need. Explanations and advice are all welcomed!

This is an example of the csv file:

    heading1,heading2,heading3,heading4,heading5
    value1_1,value1_2,value1_3,value1_4,value1_5
    value2_1,value2_2,value2_3,value2_4,value2_5
    value3_1,value3_2,value3_3,value3_4,value3_5
    value4_1,value4_2,value4_3,value4_4,value4_5
    value5_1,value5_2,value5_3,value5_4,value5_5

This is how I'd want to display it:

I'm trying to import a local CSV file with headings into a local HTML file, which will then display as a table in a browser.

I haven't been learning HTMLand JavaScript for long, so I don't know a lot about importing and converting. What I need is some advice or possibly a basic script describing the sort of function I need. Explanations and advice are all welcomed!

This is an example of the csv file:

    heading1,heading2,heading3,heading4,heading5
    value1_1,value1_2,value1_3,value1_4,value1_5
    value2_1,value2_2,value2_3,value2_4,value2_5
    value3_1,value3_2,value3_3,value3_4,value3_5
    value4_1,value4_2,value4_3,value4_4,value4_5
    value5_1,value5_2,value5_3,value5_4,value5_5

This is how I'd want to display it:

http://jsfiddle.net/yekdkdLm

• javascript
• html
• csv

• with local, you mean a CSV on the server, right? – davidkonrad Commented Sep 5, 2014 at 11:04
• no i mean a simple csv text file in the same folder as the html file, im still kinda of learning, but all the places i've looked have not really explained what they did or how to then access that data – Roy Davies Commented Sep 5, 2014 at 11:08
• Here You can find example of access to the local file from browser. You just later need to write code for split and creating table. – szpic Commented Sep 5, 2014 at 11:33
• Mmm that page is pretty good, seems like there's plenty of ways to do this but they are all pretty longwinded – Roy Davies Commented Sep 5, 2014 at 11:49
• @davidkonrad is correct. With working on a local file, your machine is "the server", even though it's not deployed anywhere. Whether it's on a server, or just a raw HTML file in a folder on your machine, with the CSV sitting right next to it are inconsequential (other than the URL to access said CSV). – krillgar Commented Sep 5, 2014 at 13:04

5 Answers 5

<div id="CSVTable"></div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//jquerycsvtotable.googlecode.com/files/jquery.csvToTable.js"></script>

<script>
$(function() {
  $('#CSVTable').CSVToTable('your_csv.csv');
});
</script>

you can use jquery.csvToTable.js to display csv file in html

Fetch an external file.

You have to use xmlHttpRequest for this. Simplified using jQuery (include jQuery library) as.

You will need to run the HTML file in a local server like Apache, browsers like Chrome doesnt allow xmlHttp for file:// urls.

  $.ajax({
    type: "GET",
    url: "words.txt",
    dataType: "text",
    success: parseTxt
  });

Use a success callback to process the data

parseTxt is the function to which the content of the file is read and passed. You can then write the code in parseTxt to process the text as string.

function parseTxt(text){
  var rows=text.split('\n');

  //for each row
  //cols=rows[i].split(',');
}

This should be enough to get you started I guess.

How to read a text file from server using JavaScript?

You can even try the answer to above question by Shadow Wizard using iframes.

A RAW XMLHttpRequest can be made without jQuery as shown here

I don't think there is a trivial solution to this. An insistence on using client-side JavaScript makes this a more difficult task than doing the processing on the server-side and simply serving up the HTML.

You first need to use JavaScript to fetch the file from the server, the easiest way to do this is with the jQuery library. Next you need to take the data and construct the HTML in the existing document, again, jQuery will simplify this for you.

If you are still learning, I'd recommend skipping the first bit, and simply create a JavaScript variable with the data already in it. This way you can write the code to build the table, get this working, then go back to worrying about how you would actually fetch that from the server using AJAX.

Alternative, look at using a server-side language such as PHP which will incorporate the data into the page before delivering it to the browser. Without knowing more details, this would seem like the more logical solution.

You need to use javascript(jquery) or php This is the code to open with php and get the values in a table

<table>
<tr>
    <td>Header 1</td>
    <td>Header 2</td>
</tr>
<?php
    $fp = fopen ( "file.csv" , "r" );
    while (( $data = fgetcsv ( $fp , 1000 , "," )) !== FALSE ) {
        $i = 0;
        echo "<tr>";
        foreach($data as $row) {
           echo "<td>" . $row . "</td>";
           $i++ ;
        }
        echo "/<tr>";
    }
    fclose ( $fp );
    ?>
</table>

I used PHP to parse the CSV file on the server side, then format that output as HTML. Along the way, it turns the unique values in the CSV columns into unique filter values to refine the result set.