We help IT Professionals succeed at work.
Get Started

Need HTML page that Retrieves Data from CSV and Displays in a table with NO Server Interaction

JS List
JS List asked
on
163 Views
Last Modified: 2016-04-12
Hello,

I have to build a web page that the user can click on and it will display several rows of  3 text fields and 1 link field in a table.  The data is a csv file in the same folder.

Here's the catch the web page will be sitting in the users laptop and no connection to the internet or a server.  The links are to documents in the same folder.

Thought I could do this with JavaScript - and actually got the file read in.  But can't figure out how to display it in a table.  Plus I don't want the user to select the file.

Code below.
<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<meta charset="utf-8">
 <script language="javascript" type="text/javascript">
  function onloadpage() {
         document.formname.reset()
      }
</script>
          
   <title>AgDocsJS</title>
  </head>
 <body onload="onloadpage();">
 
<form id="formname" name="formname" method="post" action="" >

<input type="file" name="file" id="file" accept=".csv">

</form>

<script language="javascript" type="text/javascript">
    document.getElementById('file').onchange = function () {
        alert('here3');
        var file = this.files[0];

        var reader = new FileReader();
        reader.onload = function (progressEvent) {
            // Entire file
            console.log(this.result);
            //document.writeln(this.result);
            // By lines
            var lines = this.result.split('\n');
            for (var line = 0; line < lines.length; line++) {
                console.log(lines[line]);
                document.write('"<br>"');
                document.writeln(lines[line]);

            }
        };
        reader.readAsText(file);

    };
</script>
</body>
 </html>



 Then saw Tabular Data Control in IE.  Thought maybe this would work.  It's an Active X that comes with IE.  It's ok if the user has to click on using the Active X item.  But the code doesn't work.  Code below.
http://www.sitepoint.com/control-internet-explorer/
https://msdn.microsoft.com/en-us/library/ms531386(v=vs.85).aspx


Tabular Data Control Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<meta charset="utf-8">
<script language="javascript" type="text/javascript">
     var dataSet = data1.recordset;
     dataSet.moveNext();  
</script>  
 </head>
 
 <body>
 <object id="data1" classid="clsid:333C7BC4-460F-11D0-BC04-0080C7055A83" id="dsotemplates" width="0" height="0">
<param name="DataURL" value="Templates.txt">
<param name="UseHeader" value="TRUE">
<param name="FieldDelim" value=",">
</object>

<table border="1" cellspacing="0" cellpadding="0" datasrc="#data1">

<thead>
<tr style="background-color: #E7EFF7;"><th width="10%" class="textBold thinBorder spacerRow30" valign="top" align="center">Category</th>
<th width="15%" class="textBold thinBorder" valign="top" align="center">Type</th>
<th width="34%" class="textBold thinBorder" valign="top" align="center">Description</th>
<th width="34%" class="textBold thinBorder" valign="top" align="center">File</th>
<th width="7%" class="textBold thinBorder" valign="top" align="center">Published</th></tr>
</thead>

<tbody> <tr>
<td><span datafld='category'> </span></td>
<td><span datafld='type'></span></td>
<td><span datafld='description'> </span></td>
<td><span datafld='file'> </span></td>
<td><span datafld='published'> </span></td>
</tbody>

</table>


I'd prefer the Tabular Data Control in IE but not sure if you have to be hooked up to a server.

Using IE 11 and windows 8.1

Any ideas?
Comment
Watch Question
Commented:
This problem has been solved!
Unlock 3 Answers and 5 Comments.
See Answers
Why Experts Exchange?

Experts Exchange always has the answer, or at the least points me in the correct direction! It is like having another employee that is extremely experienced.

Jim Murphy
Programmer at Smart IT Solutions

When asked, what has been your best career decision?

Deciding to stick with EE.

Mohamed Asif
Technical Department Head

Being involved with EE helped me to grow personally and professionally.

Carl Webster
CTP, Sr Infrastructure Consultant
Ask ANY Question

Connect with Certified Experts to gain insight and support on specific technology challenges including:

  • Troubleshooting
  • Research
  • Professional Opinions
Did You Know?

We've partnered with two important charities to provide clean water and computer science education to those who need it most. READ MORE