Search text file returns a number

Question

I am trying to search this text file but it returns a number, The code will not work it just returns a number

<script type="text/javascript">
function readTextFile(file)
{
    var rawFile = new XMLHttpRequest();
    rawFile.open("GET", file, true);
    rawFile.onreadystatechange = function ()
    {
        if(rawFile.readyState === 4)
        {
            var allText = rawFile.responseText;
            document.getElementById("textSection").innerHTML = allText;
        }
    }

    rawFile.send();
}

var str = readTextFile("testing.txt");
var n = str.search("Testing Search");
</script>

You realize that AJAX is asynchronous right? You're searching something that probably hasn't been returned yet. — j08691, Oct 21 '15 at 17:06

Yuriy Yakym · Answer 1 · 2015-10-21T17:28:17.790

readTextFile call is asynchronous. You can't get str instantly. You should use callback. So you will be able do something with text only when response is received.

Example code:

<script type="text/javascript">
function readTextFile(file, callback)
{
    var rawFile = new XMLHttpRequest();
    rawFile.open("GET", file, true);
    rawFile.onreadystatechange = function ()
    {
        if(rawFile.readyState === 4)
        {
            var allText = rawFile.responseText;
            document.getElementById("textSection").innerHTML = allText;
            callback(allText); // call your function passing received text into it
        }
    }

    rawFile.send();
}

readTextFile("testing.txt" function(myStr) {
    // You will get here when response is received
    var n = str.search("Testing Search");
    alert(n);
});
</script>

score 0 · Answer 2 · edited May 23 '17 at 11:59

That is because Ajax requests are asynchronous. You should do it like this:

function readTextFile(file, callback)
{
    var rawFile = new XMLHttpRequest();
    rawFile.open("GET", file, true);
    rawFile.onreadystatechange = function ()
    {
        if(rawFile.readyState === 4)
        {
            var allText = rawFile.responseText;
            document.getElementById("textSection").innerHTML = allText;
            callback(allText);
        }
    }

    rawFile.send();
}

readTextFile("testing.txt", function(text)
{
    var n = text.search('Testing Search');
});

score 0 · Answer 3 · answered Oct 21 '15 at 17:15

Your readTextFile function doesn't have a return statement, so it will return nothing, and when you do var str = readTextFile("testing.txt");, str will be always undefined.

Besides that, the XMLHttpRequest in the way you're using is an asynchronous operation, and then, you won't be able to return the text received from the file.

So, you must comprehend that you'll need to do something different. For example, a callback function:

function readTextFile(file, callback)
{
    var rawFile = new XMLHttpRequest();
    rawFile.open("GET", file, true);
    rawFile.onreadystatechange = function ()
    {
        if(rawFile.readyState === 4)
        {
            var allText = rawFile.responseText;
            document.getElementById("textSection").innerHTML = allText;
            callback(allText);
        }
    }

    rawFile.send();
}

And then, you'll use it like:

readTextFile("testing.txt", function(str) {
    var n = str.search("Testing Search");
});

Search text file returns a number

3 Answers3