Jquery Read Text File into an Array
Jquery

Jquery Read Text File into an Array

by

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.

Foo text file
foo text file

Above is the text file named as foo.txt.

Getting Content from a text file
Getting Content from a text file
Console log print array value
Console log print array value

From the above three images you come to know easily how read text file into array using jquery.

I hope you liked my this article. If you have any queries or any question regarding this, Feel free to comment on Me.

javascript load text file into variablejquery load text file into variablejquery read local text filejquery read text file line by lineread text file jquery