CODEWITHSUNDEEP
javascripthtmlcsv
Roy Davies
Roy Davies

Reputation: 101

Display CSV file in HTML

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

Upvotes: 9

Views: 71908

Answers (5)

Shawn DeWolfe
Shawn DeWolfe

Reputation: 111

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.

Upvotes: 0

sabithpocker
sabithpocker

Reputation: 15566

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

Upvotes: 0

Ankit Agrawal
Ankit Agrawal

Reputation: 6124

<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

Upvotes: 5

Javier
Javier

Reputation: 113

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>

Upvotes: 0

Philip Wattis
Philip Wattis

Reputation: 43

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.

Upvotes: 0

Related Questions