How To Convert CSV file to HTML table

Question

i have csv file with the content : heading1,heading2,heading3,heading4,heading5 value1_1,value2_1,value3_1,value4_1,value5_1 value1_2,value2_2,value3_2,value4_2,value5_2

I create Javascript/HTML code to pick up that file and display the content

<html> 
<head> 
<title>show csv</title> 
</head> 
<body> 
    <input type="file" id="fileinput" multiple />
    <div id="result"></div>
    <script type="text/javascript">
      function readMultipleFiles(evt) {
        //Retrieve all the files from the FileList object
        var files = evt.target.files; 

        if (files) {
            for (var i=0, f; f=files[i]; i++) {
                  var r = new FileReader();
                r.onload = (function(f) {
                    return function(e) {
                        var contents = e.target.result;
                        var res = document.getElementById("result");
                        res.innerHTML = "Got the file<br>" 
                              +"name: " + f.name + "<br>"
                              +"type: " + f.type + "<br>"
                              +"size: " + f.size + " bytes</br>"
                              + "starts with: " + contents; 
                    };
                })(f);

                r.readAsText(f);
            }   
        } else {
              alert("Failed to load files"); 
        }
      }

          document.getElementById('fileinput').addEventListener('change',readMultipleFiles, false);
    </script>
</body> 
</html>

and the output is like : output

question : How can i convert the content or the data to array and showing as html table ?

thanks for any help.

you showed us your code, but what is the problem? please read http://stackoverflow.com/help/how-to-ask — Philipp Sander, Dec 02 '16 at 16:02
All you need to do to get the values into an array is: `var ary = values.split(",");` From there, you can loop the values and do whatever you want. — Scott Marcus, Dec 02 '16 at 16:02
Please note a key phrase in the link provided by @PhilippSander: "Search... and research", because this question answers a good chunk of this question: http://stackoverflow.com/q/7431268/215552 — Heretic Monkey, Dec 02 '16 at 16:09

score 1 · Answer 1 · answered Dec 02 '16 at 16:29

You can convert csv data into array and then into html table. I have added \n into your new line. Please add the \n to your code when there is a new line.

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <style>
         table {
         border-collapse: collapse;
         border: 2px black solid;
         font: 12px sans-serif;
         }
         td {
         border: 1px black solid;
         padding: 5px;
         }
      </style>
   </head>
   <body>
      <div id='container'></div>
      <script type="text/javascript"charset="utf-8">
         var data = 'heading1,heading2,heading3,heading4,heading5\nvalue1_1,value2_1,value3_1,value4_1,value5_1\nvalue1_2,value2_2,value3_2,value4_2,value5_2';
         var lines = data.split("\n"),
         output = [],
         i;
         for (i = 0; i < lines.length; i++)
         output.push("<tr><td>"
         + lines[i].slice(0,-1).split(",").join("</td><td>")
         + "</td></tr>");
         output = "<table>" + output.join("") + "</table>";
         var div = document.getElementById('container');
         
         div.innerHTML = output;
      </script>
   </body>
</html>

AJQShake · Answer 2 · 2018-08-14T08:22:33.667

I found Kapila Perera's answer to be very useful. However, the last element of each row was being cropped due to the slice(0,-1) use. Building on Perera's answer, in the example below I've used slice() instead.

I've also separated out the first row lines[0] as a header row and loop from 1 instead (which won't always be the case that csv contains headers but is explicitly called out in the example).

Finally, I've added the tbody tags when the output gets wrapped but this probably isn't required.

    <script type="text/javascript"charset="utf-8">
        var div = document.getElementById('container');
        var data = 'heading1,heading2,heading3,heading4,heading5\nvalue1_1,value2_1,value3_1,value4_1,value5_1\nvalue1_2,value2_2,value3_2,value4_2,value5_2';
        var lines = data.split("\n"), output = [], i;

        /* HEADERS */
        output.push("<tr><th>" 
            + lines[0].slice().split(",").join("</th><th>") 
            + "</th></tr>");

        for (i = 1; i < lines.length; i++)
            output.push("<tr><td>" 
                + lines[i].slice().split(",").join("</td><td>") 
                + "</td></tr>");

        output = "<table><tbody>" 
                    + output.join("") + "</tbody></table>";

        div.innerHTML = output;
    </script>

How To Convert CSV file to HTML table

2 Answers2