HTML - read .txt file from URL location in javascript

Question

I want to read a .txt file an URL location, lets say from http://www.puzzlers.org/pub/wordlists/pocket.txt and process its content on my page.

Can you point me out some tutorials or some basic code on how to do this in javascript?

I have a basic HTML code where I have some tables and I want to populate them with text from a .txt from a given URL location, but I do not know how to read the data from that location.

<html>
<head>
  <title>Pseudoganglia Interface</title>
  <!-- CSS goes in the document HEAD or added to your external stylesheet -->
  <style type="text/css">
  table.gridtable {
    font-family: verdana,arial,sans-serif;
    font-size:11px;
    color:#333333;
    border-width: 1px;
    border-color: #666666;
    border-collapse: collapse;
  }
  table.gridtable th {
    border-width: 1px;
    padding: 8px;
    border-style: solid;
    border-color: #666666;
    background-color: #dedede;
  }
  table.gridtable td {
    border-width: 1px;
    padding: 8px;
    border-style: solid;
    border-color: #666666;
    background-color: #ffffff;
  }
  </style>
  <!-- Table goes in the document BODY -->
  <script>
    function getText()
    {
     // read text from URL location
    }
    function populateTables() {
      var tableHP = document.getElementById("tHP");
      // Create an empty <tr> element and add it to the 1st position of the table:
      var row = tableHP.insertRow(tableHP.rows.length);
      // Insert new cells (<td> elements) at the 1st and 2nd position of the "new" <tr> element:
      var cell1 = row.insertCell(0);
      var cell2 = row.insertCell(1);

      // Add some text to the new cells:
      cell1.innerHTML = "NEW CELL1";
      cell2.innerHTML = "NEW CELL2";
    }
  </script>
</head>
<body onload="populateTables()">
<table class="gridtable" id="tHP">
  <tr>
<th colspan=2>HP</th>
  </tr>
  <tr>
<td># SN</td>
<td>% of used RAM</td> 
  </tr>
</table>

<br>

<table class="gridtable" id="tIBM">
  <tr>
<th colspan=2>IBM</th>
  </tr>
  <tr>
<td># CN</td>
<td>% of used RAM</td> 
  </tr>
</table>
</body>
</html>

do you have control over the location which has this text file? — krishwader
– krishwader, Commented Mar 3, 2015 at 9:22
The search term you are looking for is Ajax. The world doesn't need another Ajax tutorial (so voting to close as too broad). — Quentin
– Quentin, Commented Mar 3, 2015 at 9:26
It's not too broad at all, it's just duplicate: stackoverflow.com/questions/15547407/… — CyberDude
– CyberDude, Commented Mar 3, 2015 at 9:33
@CyberDude — It doesn't look like a duplicate of that one, since the question has already found the XHR object and tried to use it. — Quentin
– Quentin, Commented Mar 3, 2015 at 9:35
Maybe not 100%, there are plenty of similar questions, I just picked one. — CyberDude
– CyberDude, Commented Mar 3, 2015 at 9:40

Ian Campbell · Accepted Answer · 2020-12-08 02:47:45Z

25

from codegrepper using fetch (unsupported on IE).

const url = "http://www.puzzlers.org/pub/wordlists/pocket.txt"
fetch(url)
   .then( r => r.text() )
   .then( t => //process your text! )

answered Dec 8, 2020 at 2:47

Ian Campbell

3843 silver badges7 bronze badges

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

3 Comments

Khairy Abd El-Zaher Over a year ago

Clean and does the job

Stewart Over a year ago

More info: w3schools.com/js/js_api_fetch.asp developer.mozilla.org/en-US/docs/Web/API/Fetch_API

Per Lundberg Over a year ago

On the status of the Fetch API, this might be of interest: caniuse.com/fetch

RomanPerekhrest · Accepted Answer · 2015-03-03 09:52:11Z

24

this code may help you:

function getText(){
    // read text from URL location
    var request = new XMLHttpRequest();
    request.open('GET', 'http://www.puzzlers.org/pub/wordlists/pocket.txt', true);
    request.send(null);
    request.onreadystatechange = function () {
        if (request.readyState === 4 && request.status === 200) {
            var type = request.getResponseHeader('Content-Type');
            if (type.indexOf("text") !== 1) {
                return request.responseText;
            }
        }
    }
}
function populateTables(){
    
    var outer_text = getText();
    outer_text = outer_text.split('\n');    // you can adjust the manner of parsing the received file (regexp)
    
    var tableHP = document.getElementById("tHP");
// Create an empty <tr> element and add it to the 1st position of the table:
    var row = tableHP.insertRow(tableHP.rows.length);
// Insert new cells (<td> elements) at the 1st and 2nd position of the "new" <tr> element:
    var cell1 = row.insertCell(0);
    var cell2 = row.insertCell(1);

// Add some text to the new cells:
    cell1.innerHTML = outer_text[0];
    cell2.innerHTML = outer_text[1];
}

answered Mar 3, 2015 at 9:52

RomanPerekhrest

93.1k4 gold badges75 silver badges112 bronze badges

4 Comments

Simon Over a year ago

I am having the same issue as above. For request.readyState I get the value of 4 and for request.status I get the value of 0. Do you know what might cause this and how should I fix it?

Simon Over a year ago

And for var type = request.getResponseHeader('Content-Type'); I get null.

RomanPerekhrest Over a year ago

Probably, you don't have permissions to request resources from another domain (ES same origin policy). On "that" domain the following header should be set: header('Access-Control-Allow-Origin: *');

Ken Lyon Over a year ago

I realize this is an old question now, but it was helpful to me so I'll add my observation as to why some may be having problems with it. The call to request.open includes true for asynchronous but the getText() function is being called with the assumption that the result will be present immediately. In my case, I called a separate function with request.responseText rather than returning it. Maybe passing false to request.open() might block until it's loaded. That could be an alternative fix.

Collectives™ on Stack Overflow

HTML - read .txt file from URL location in javascript

2 Answers 2

3 Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related