reading a file in javascript

Question

I am new to javascript and am trying to read a file and display it contents on browser.

I have this code so far:

<script type="text/javascript">
        var fname ;
        if(navigator.appName.search('Microsoft')>-1) { fname = new ActiveXObject('MSXML2.XMLHTTP'); }
        else { fname = new XMLHttpRequest(); }

        function read(filename) {
            fname.open('get', filename, true);
            fname.onreadystatechange= steady;
            fname.send(null);
        }

        function steady() {
            if(fname.readyState==4) {
                var el = document.getElementById('read_file');
                el.innerHTML = fname.responseText;
            }
        }
    </script>

But the output on I get is :

x   y 5 90 25   30 45   50 65   55 85   25

Whereas the data is in format:

Two questions:

1) How do i display it in the format as above

2) As of now, this happens when I click on a button.. is there any way I can automatically read from this given file rather than clicking on a button

SO this is how my html code looks like

<input type="button" value="load file"  onclick="read('data.tsv')">

I want to get rid of this "onclick" and just read the file

THanks

What kind of element is read_file? Change it to <textarea> or <pre>. — bfavaretto
– bfavaretto, Commented Feb 6, 2013 at 21:59
Are you sure that's the output you get? Or is that perhaps the output you see in the browser window after it treats the output like unstyled HTML? If you're displaying this in HTML, you're going to need to format it as such. HTML otherwise ignores whitespace, treating all whitespace (multiple spaces, returns, etc.) as a single space character. You can perhaps wrap it in a <pre> tag, or manually add   codes and <br /> tags. — David
– David, Commented Feb 6, 2013 at 21:59
About the onclick part: just call read('data.tsv') at the end of your current js code. You probably should put that js block right before </body> to make sure the reference to read_file will exist when it runs. — bfavaretto
– bfavaretto, Commented Feb 6, 2013 at 22:00
One more thing: instead of sniffing the browser with if(navigator.appName.search('Microsoft')>-1), check for the feature with if(!window.XMLHttpRequest) — bfavaretto
– bfavaretto, Commented Feb 6, 2013 at 22:06

zzzzBov · Accepted Answer · 2013-02-06 22:01:23Z

3

How do I display it in the format as above?

Make sure the element you insert the content into is using white-space: pre for styling, otherwise spaces will be condensed. Also, be aware that special characters such as <, >, ", and & will need to be escaped for use with innerHTML. Typically <pre> elements are used when spacing must be preserved.

As of now, this happens when I click on a button.. is there any way I can automatically read from this given file rather than clicking on a button

If the <script> is executed after the #read_file element, you could simply call the function:

read('data.tsv');

If not, you could set an onload event handler that would execute when the page has finished loading:

window.onload = function () {
    read('data.tsv');
};

answered Feb 6, 2013 at 22:01

zzzzBov

180k57 gold badges328 silver badges375 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Fenton · Accepted Answer · 2013-02-06 22:01:53Z

2

To remove the button, just add the call to the end of your JavaScript:

    // ...

    read('data.tsv');
</script>

There are a couple of ways to display the data as you find it in the file.

The first is to wrap it in an element that preserves white-space...

el.innerHTML = '<pre>' + fname.responseText + '</pre>';

Or you could replace all the line breaks and tabs / spaces with HTML, for example a line break could be converted into a <br> tag and a space could be replaced with a non-breaking space:  .

You could even split it by line-breaks and white-space in order to display it in a table, which would be the correct way of displaying the type of information you have.

answered Feb 6, 2013 at 22:01

Fenton

253k74 gold badges404 silver badges414 bronze badges

Comments

mohammad mohsenipur · Accepted Answer · 2013-02-06 22:01:25Z

1

you must replace < br> instead of newline.in browser newline not show

answered Feb 6, 2013 at 22:01

mohammad mohsenipur

3,1242 gold badges19 silver badges22 bronze badges

Comments

hamilton.lima · Accepted Answer · 2013-02-06 22:01:47Z

1

about the format you should use the <pre> tag, so the original format will be preserved, more details here : http://www.w3schools.com/tags/tag_pre.asp

and to run without user intervention, use <body onload="read('data.tsv')">

have fun !

answered Feb 6, 2013 at 22:01

hamilton.lima

1,91818 silver badges29 bronze badges

Collectives™ on Stack Overflow

reading a file in javascript

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related