3schools

Table Maker3schools TranslateImage CompressorFavicon Icon GeneratorCrop & Resize Image
Apu
Apu January 19, 2024 . #HowTo . #Javascript
❌

How do I load the contents of a text file into a javascript variable?

I have a question about loading the contents of a text file into a JavaScript variable. I want to load the contents of the file /robots.txt into a variable.


<script>
var fileContents;
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
  if (this.readyState === 4 && this.status === 200) {
    fileContents = this.responseText;
    console.log(fileContents)
  }
};
xhttp.open("GET", "/robots.txt", true);
xhttp.send();
</script>

This code seems to work, but I'm not entirely sure about its efficiency and if there's a better way to achieve this. Can someone provide an alternative solution or suggest improvements?

save
listen
AI Answer
4 Answers
  1. Your code seems fine for fetching the contents of a text file. However, there's a more modern way of doing this using the Fetch API.
    fetch("/robots.txt")
      .then(response => response.text())
      .then(data =>{
    var fileContents = data;
    console.log(fileContents);
    });

    The Fetch API provides a cleaner and more Promise-based approach to make HTTP requests. It simplifies handling responses and is widely supported in modern browsers.
    • That's a helpful suggestion. I appreciate it. Now, I'm wondering if there's a way to handle errors in case the file doesn't exist or there are network issues. Do you have any tips for that?
    • I have one more question. What if I want to read a local file from the user's device, like an uploaded text file? How can I achieve that?
    • You can search for specific content within the fileContent variable using JavaScript string methods. Here's an example of how you can check if "User-agent" exists in the file:
      if (fileContent.includes("User-agent")) {
      console.log("User-agent found!");
      }else{
      console.log("User-agent not found.");
      }
      This code snippet uses the includes method to check if "User-agent" exists in the fileContent variable. You can replace the console.log statements with your desired actions.
    Reply Delete
    Share
    Reply Delete
    Share
Write Your Answer
loading
back
View All