Question

97

HTML - read .txt file from URL location in javascript

rated 0 times [ 100] [ 3] / answers: 1 / hits: 82764 / 9 Years ago, tue, march 3, 2015, 12:00:00

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>

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

daquanmilesw

Add To Favorites

Follow

Total Points: 57

Total Questions: 102

Total Answers: 110

Location: Wallis and Futuna

Member since Sat, Aug 6, 2022

2 Years ago

daquanmilesw questions

1 array.filter is returning entire object instead of just one value

Thu, Jan 13, 22, 00:00, 2 Years ago

1 How to make Swiper JS display faction pagination and progress bar at the same time?

Tue, Jul 13, 21, 00:00, 3 Years ago

1 How can I do top level await

Sat, Jul 10, 21, 00:00, 3 Years ago

1 Svelte reactivity not triggering when variable changed in a function

Thu, Sep 17, 20, 00:00, 4 Years ago

1 Importing node modules in a WordPress plugin

Wed, Jun 24, 20, 00:00, 4 Years ago

View All

answered 9 Years ago tina · Accepted Answer

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];

}