Data from txt file to webpage

Question

So i have text file which contains some numbers and i want so display all that content in html page. I assume i need to use javascript or jQuery. I tried things like:

function getText() {
  fetch('inputfile.txt')
    .then(function(res) {
      return res.text();
    })
    .then(function(data) {
      console.log(data);
    });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>

<head>
  <title></title>
  <style type="text/css" media="screen">

  </style>
  <script type="text/javascript" src="jquery-1.11.3.min.js"></script>
  <script type="text/javascript">
    $(function() {
      $.get('inputfile.txt', function(data) {
        //If the returned data is not empty or whitespace
        if (data) {
          // split the string into several strings when a new line occures
          var lines = data.split('\n'); // Take note of the \n This is the new line character also known as a line ending, end of line (EOL), or line break.
          // If there are more than 0 lines
          if (lines.length > 0) {
            // For every line console.log out what the line is with the line number prepended.
            for (var i = 0; i < lines.length; i++) {
              console.log(i + ": " + lines[i]);
            }
          }
        } else {
          // It is empty, do somethin else
          alert('no data present in txt file.');
        }
      });
    });
  </script>
</head>

<body>
</body>

</html>

But every time i check webpage it not showing any content from txt file.

currently your code shows you only logging it to the console, you would need to place it into an element on the page. Unless I am missing something. — Harry Chilinguerian, Sep 05 '18 at 16:00
I believe this provides your answer: https://stackoverflow.com/questions/6470567/jquery-load-txt-file-and-insert-into-div — sparkhead95, Sep 05 '18 at 16:00
This might help https://stackoverflow.com/questions/14446447/how-to-read-a-local-text-file — Anand G, Sep 05 '18 at 16:01
@HarryChilinguerian i think you are right. How do i do that? — Vil4nte, Sep 05 '18 at 16:06

score 0 · Accepted Answer · answered Sep 05 '18 at 16:16

I included comments to the code I posted, add a content area I put in a 'pre' tag but it could be anything, then in the code when you receive the response load it into the html of that tag/container:

<html>
<head>
    <title></title>
    <style type="text/css" media="screen">
    </style>
    <script type="text/javascript" src="jquery-1.11.3.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $.get('inputfile.txt', function(data) {
                //If the returned data is not empty or whitespace
                if (data) {
                    // split the string into several strings when a new line occures
                    var lines = data.split('\n'); // Take note of the \n This is the new line character also known as a line ending, end of line (EOL), or line break.
                    // If there are more than 0 lines
                    if (lines.length > 0) {
                        // For every line console.log out what the line is with the line number prepended.
                        var $content = $('#content'); //grab the content area
                        for (var i = 0; i < lines.length; i++) {
                            console.log(i + ": " + lines[i]);
                            $content.html($content.html() + "\n" + i + ": " + lines[i]); //insert a new line into the content area
                        }
                    }
                } else {
                    // It is empty, do somethin else
                    alert('no data present in txt file.');
                }
            });
        });
    </script>
</head>
<body>
  <pre id="content"></pre><!-- Added a place for the content --> 
</body>
</html>

Data from txt file to webpage

1 Answers1