read a text file using Javascript

Question

I've been trying to read a text file by Javascript and it worked but the function returns nothing.

<!DOCTYPE html>
<html>
<body>
<head>
<style>
  html, body, #map-canvas {
    height: 100%;
    margin: 0px;
    padding: 0px
  }
</style>
<script>
function loadFile(uri) {
var r = new XMLHttpRequest();
r.open('GET', uri, true);
r.onreadystatechange = function() {
if (r.readyState == 4) {
textlines=processFile(r.responseText);
}
}

r.send(null);
return textlines;
}

function processFile(fileContent) {
var lines= fileContent.split('\n');
return lines;
}

var lines=loadFile('ss.txt');
alert(lines[0]);
</script> 
</head>


</body>
</html>

The output is a message dialog saying: Undefined.

Duplicate of [How to return AJAX response Text?](http://stackoverflow.com/questions/1225667/how-to-return-ajax-response-text) — Quentin, Nov 25 '13 at 11:32
It's not an answer but, you know you've got your head inside your body yes? In the HTML that is, I'm not implying you have your head up your arse. — Iain M Norman, Nov 25 '13 at 11:36
Try checking the `if (r.readyState == 4) {` line. Check if it indeed is in state 4. — Dropout, Nov 25 '13 at 11:36
I mistakenly removed the body start tag however this is not the problem. When I display the content inside the loadfile function, the file is read successfully and the output is displayed. However when I try to display the contents from outside it fails. — Doua Ali, Nov 25 '13 at 11:52

softvar · Accepted Answer · 2013-11-25T12:18:57.073

0

The thing is that:

1) textlines is not defined anywhere like var textlines;

2) textlines will be returned when the status is OK but when you're alerting the value it seems that the line executes before the xml request has finished grabbing the contents and returns. Hence, you should alert the value when you check (==4) or make a function and pass textlines so that it would be available only if it's set and ready to be displayed. Code goes like this [TESTED]

<script>
var textlines;

function processFile(fileContent) {
var lines= fileContent.split('\n');
return lines;
}

function printValue(textlines){
    alert(textlines);
}

function loadFile(uri) {
var r = new XMLHttpRequest();
r.open('GET', uri, true);
r.onreadystatechange = function() {
if (r.readyState == 4) {
textlines =  processFile(r.responseText);
printValue(textlines);
return textlines;
}
}

r.send(null);
return textlines;
}


var lines=loadFile('ss.txt');

</script>

UPDATE:

If you want to use the variable textlines without making a function and passing, you should have to wait a while until xml request is complete to grab the contents so you could do:

<script>
var textlines;

function processFile(fileContent) {
var lines= fileContent.split('\n');
return lines;
}

function loadFile(uri) {
var r = new XMLHttpRequest();
r.open('GET', uri, true);
r.onreadystatechange = function() {
if (r.readyState == 4) {
textlines =  processFile(r.responseText);
return textlines;
}
}

r.send(null);
return textlines;
}


var line=loadFile('ss.txt');
setTimeout(function(){
    alert(textlines);
},100);
</script>

edited Nov 25 '13 at 12:18

answered Nov 25 '13 at 11:47

softvar

17,917
12
55
76

Thanks again but there's still something wrong. When I try to print the values from outside the loadfile function, there's nothing to display! i.e: – Doua Ali Nov 25 '13 at 12:06
Like? you can pass `textlines` to a function as i did, and in that function do whatever you want to do with that variable? – softvar Nov 25 '13 at 12:08
Ok I already did but I didn't work either. Isn't textlines a global variable? When I display its value from outside the value is undefined. var lines=loadFile('ss.txt'); alert(lines); // undefined value alert(textlines); // undefined value as well – Doua Ali Nov 25 '13 at 12:23
Yeah! that's what I'm trying to explain you that xml requests are asynchronous in nature, which means that if you request something from server/localserver it will continue it in the background and will continue to execute the further lines as in sequence. So `alet(textlines)` would work definitely but only after xml request is completed which will always take some time to read the contents of the file. So you have to explicitly wait a while to fetch `textlines` like `var lines=loadFile('ss.txt');setTimeout(function(){alert(textlines);},100);` where 100 means 1/10 of a second. Hope you got it! – softvar Nov 25 '13 at 12:28
Thanks a lot for your reply. I can't do it yet. Well, to sum it up, I need to read a text file, extract locations from it and mark those locations on Google maps. I can't take the text file's contents and use them on the Google Map. Any hints please? – Doua Ali Dec 01 '13 at 09:14
Thanks for your concern. How can I share it here? It's too long to add in a comment.i don't know either how to contact you. – Doua Ali Dec 02 '13 at 07:20
I have added the code in another post. Here is the link: http://stackoverflow.com/questions/20323010/read-text-file-google-maps – Doua Ali Dec 02 '13 at 07:33

read a text file using Javascript

1 Answers1