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:
x y
5 90
25 30
45 50
65 55
85 25
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
4 Answers 4
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');
};
Comments
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.
Comments
you must replace < br> instead of newline.in browser newline not show
Comments
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 !
read_file? Change it to<textarea>or<pre>.<pre>tag, or manually add codes and<br />tags.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 toread_filewill exist when it runs.if(navigator.appName.search('Microsoft')>-1), check for the feature withif(!window.XMLHttpRequest)