Display CSV file in HTML file

Question

I am trying to import a local CSV file with headers into a local HTML file which will then be displayed as a table in a browser.

I haven’t studied HTML and JavaScript for a long time, so I don’t know much about importing and converting. I need advice or maybe a basic script describing the function I need. Explanations and tips are welcome!

This is an example 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 want to display it:

http://jsfiddle.net/yekdkdLm

Answer 1

Get an external file.

For this you need to use xmlHttpRequest . Simplified using jQuery (including jQuery library) like.

You will need to run the HTML file on a local server such as Apache, browsers such as Chrome do not allow xmlHttp for file:// URLs.

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

Use success callback for data processing

parseTxt is the function with which the contents of the file are read, and passed . You can then write the code in parseTxt to process the text as a string.

 function parseTxt(text){ var rows=text.split('\n'); //for each row //cols=rows[i].split(','); } 

That should be enough to get you started. I think.

---

How to read a text file from the server using JavaScript?

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

---

RAW xmlHttpRequest can be executed without jQuery, as shown here

Answer 2

You can implement the mapping of csv data to html using d3.js

Here is the simplest example: http://bl.ocks.org/ndarville/7075823

Answer 3

I do not think there is a trivial solution. Insisting on using client-side JavaScript makes this task more difficult than server-side processing and simply serving HTML.

First you need to use JavaScript to retrieve the file from the server, the easiest way to do this is through the jQuery library. Then you need to take the data and build the HTML in an existing document, again, jQuery will simplify this for you.

If you are still learning, I would recommend skipping the first bit and just creating a JavaScript variable with the data already available. That way, you can write code to build the table, get this working, and then get back to worrying about how you really get it from the server using AJAX.

Alternatively, look at using a server-side language, such as PHP, that will include data on the page before sending it to the browser. Without knowing more details, this may seem like a more logical solution.

Answer 4

You need to use javascript (jquery) or php. This is the code to open with php and get the values ​​in the 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> 

Answer 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

Answer 6

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