Jquery Read Text File into an Array

In this article, we will see how to achieve Jquery read text file into an array. This example will use when we want to get content from the text file. After getting the content from the file we can use that content to use it in any tag in HTML via jquery.

Let’s do Jquery Read Text File into an Array step by step are as follow as:

Below is the example which explain how to get array value from the text file.

So let’s start with this how to do this? we are using jQuery to achieve this task.

Actually what I am trying to show in the below example is that I have to use the button which on click calling a function in which I have used the jQuery to get text file bypassing the URL of a text file.

After getting the text file, all the content is in the text file passed into the data variable.

We get all content of text file using the split function, and then it is assigned to the variable called 'textByLine'.

As it converted to an array. To check whether it is converted into an array or not, I have print the variable value using a console log.

So that you will come to know that result which is display is an array. Then using jQuery finally I added that content to HTML inside the div with an attribute with id 'div'.

Full Example is shown below:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>contains demo</title>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
<p>Click the button to display the array values</p>
<button onclick="myFunction()">Try it</button>
<div id="div"></div>
<script>
function myFunction() {
  jQuery.get('http://localhost/foo.txt', function(data){
   //process text file line by line
   var textByLine = data.split("\n")
   console.log(textByLine);
   $('#div').html(textByLine);
});
}
</script>
 
</body>
</html>

OUTPUT from the above example.