Roy Davies Roy Davies -4 years ago 113
HTML Question

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:


This is how I'd want to display it:

Answer Source

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.

    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

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

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download