Create HTML table from text file using Javascript?

Question

I don't even know if my project is possible. After looking around for a few hours and reading up on other Stack Overflow questions, my hopes are slowly diminishing, but it will not stop me from asking!

My Project: To create a simple HTML table categorizing our Sales Team phone activity for my superior. Currently I need something to pull data values from a file and use those values inside the table.

My Problem: Can Javascript even do this? I know it reads cookies on the client side computer, but can it read a file in the same directory as the webpage? (If the webpage is on the company server?)

My Progress: I will update as I find more information.

Update: Many of you are curious about how the file is stored. It is a static webpage (table.html) on our fileserver. The text file (data.txt) will be in the same directory.

Answer 1

I've recently completed a project where i had almost the exact conditions as yourself (the only difference is that users exclusively use IE).

I ended up using JQuery's $.ajax() function, and pulled the data from an XML file.

This solution does require the use of either Microsoft Access or Excel. I used as early as the 2003 version, but later releases work just fine.

My data is held in a table on Access (on Excel i used a list). Once you've created your table in Access; it's honestly as simple as hitting 'Export', saving as XML and then playing around with your 'ajax()' function (http://api.jquery.com/jQuery.ajax/) to manipulate the data which you want to be output, and then CSS/HTML for the layout of your page.

I'd recommend Access as there's less hastle in getting it to export XML in the right manner, though Excel does it just fine with a little more tinkering.

Here's the steps with ms-access:

Create table in access & export as XML

The XML generated will look like:

<?xml version="1.0" encoding="UTF-8"?>
<dataroot xmlns:od="urn:schemas-microsoft-com:officedata" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"  xsi:noNamespaceSchemaLocation="Calls.xsd" generated="2013-08-12T19:35:13">
<Calls>
    <CallID>1</CallID>
    <Advisor>Jenna</Advisor>
    <AHT>125</AHT>
    <Wrap>13</Wrap>
    <Idle>6</Idle>
</Calls>
<Calls>
    <CallID>3</CallID>
    <Advisor>Edward</Advisor>
    <AHT>90</AHT>
    <Wrap>2</Wrap>
    <Idle>4</Idle>
</Calls>
<Calls>
    <CallID>2</CallID>
    <Advisor>Matt</Advisor>
    <AHT>246</AHT>
    <Wrap>11</Wrap>
    <Idle>5</Idle>
</Calls>

Example HTML

<table id="doclib">
    <tr><th>Name</th><th>AHT</th><th>Wrap</th><th>Idle</th></tr>
</table>

jQuery:

$(document).ready(function(){
$.ajax({
    type: "GET",
    url: "Calls.xml",
    dataType: "xml",
    success: function(xml) {
        $(xml).find('Calls').each(function(){
            var advisor = $(this).find('Advisor').text(),
                aht = $(this).find('AHT').text(),
                wrap = $(this).find('Wrap').text(),
                idle = $(this).find('Idle').text(),
                td = "<td>",
                tdc = "</td>";
            $('#doclib').append("<tr>" + 
                td + advisor + tdc + td + aht + tdc + td + wrap + tdc + td + idle + tdc + "</tr>")  
            });
        }
    });
});

Answer 2

JavaScript cannot automatically read files due to security reasons.

You have two options:

• If you can rely on IE being used, you could use some fancy ActiveX stuff.

• Use a backend which either constantly pushs data to the JS client or provides the data on pull requests.

Answer 3

This could work if you had a server like build with Node.js, PHP, ...etc.

JavaScript can read files with the Ajax protocol, but this mean that you need a server.

Otherwise your requests will go through the file:// protocol which doesn't support Ajax.

Answer 4

You can try looking into FileReader: https://developer.mozilla.org/en-US/docs/Web/API/FileReader

The FileReader object lets web applications asynchronously read the contents of files (or raw data buffers) stored on the user's computer

I've never personally gotten it to work properly, but it's supposed to be able to allow this sort of thing.

Answer 5

Try with XMLHttpRequest or ActiveXObject in IE 5 or IE 6.

Here you can find an explanation:

http://www.w3schools.com/xml/xml_http.asp

Or try this example:

http://www.w3schools.com/ajax/tryit.asp?filename=tryajax_first

Answer 6

It sounds like you just want to get the contents of a static file from your server; is that right? If that's what you need to do, you're in luck. That's very easy.

load('textTable.txt', function(err, text) {
    buildTable(text);
});

function load(url, callback) {  
    var xhr = new XMLHttpRequest();  

    xhr.onreadystatechange = function() {
        if (xhr.readyState < 4) return;

        if (xhr.status !== 200) {  
            return callback('HTTP Status ' + xhr.status);
        }  

        if (xhr.readyState === 4) {  
            callback(null, xhr.responseText);  
        }             
    };

    xhr.open('GET', url, true);  
    xhr.send('');  
}

If you go with qwest, it'll look something like this:

qwest.get('textTable.txt').success(function(text) {
    buildTable(text);
});

With jQuery:

jQuery.get('textTable.txt', function(text) {
    buildTable(text);
});