Let's Start It.

Steps:

  1. Folder Structure
  2. Read insideFolder.txt File
  3. Read InsideFolder.txt File

Demo:

Demo Online 

Download My Project Code And Play Online On CodeSandBox Editor


If You Read Txt File, JSON File, and Any Other File Inside Javascript, use Fetch Method. Make Sure You use Live Server In Javascript.

Live Server Provide You A Http Method For Your Project.You Use Express.js, Vscode Live Server Plugin,and Any other Library.

Secondly, We Don't Import Javascript File. When Use Fetch Method In Your Project.

 import data from "./read.txt";


// Show Error When Use Fetch Method With Import Method
fetch(data).then(function(response) {
   return response
}).then(function(data) {
console.log(data)
  return data.text()
}).then(function(Normal) {
  console.log(Normal)
  document.getElementById("app").innerHTML = Normal;
}).catch(function(err) {
  console.log('Fetch problem show: ' + err.message);
});
Error Inside Your Console

Error Look Like Your Console
  • Show Error Inside Your Console. Go To Demo Un Comment My Error Code After Check Your Console. You See Same Error In side Your Console.

Fetch Method Syntax:

fetch( URL, Options )

Url Option We Provide Path of Your File.

Example:

http://yourdomain.com/rootFolder.txt


Folder Structure:

Inside Folder, We Read Two File:

  • Read rootFolder.txt
  • Read insideFolder.txt


Folder Structure
Folder Structure

Read insideFolder.txt  File.

fetch("./rootFolder.txt").then(function(response) {
   return response
}).then(function(data) {
  return data.text()
}).then(function(Normal) {
  document.getElementById("app").innerHTML = Normal;
}).catch(function(err) {
  console.log('Fetch problem show: ' + err.message);
});
Read txt File In Root Folder.
  • Inside Fetch Method, We Pass Absolute File Path. In My Case My File Inside Root Folder. so we use the Absolute path look like "./rootFolder.txt". then use text() method Get data to the  Response.
  • Do Not use  Import File, Inside Fetch Method URL.  
  • Make Sure Your File Access With URL (Checkout My Example url).
  • When Add File Path With Live Server. Now Fetch Method Convert To a URL. If fetch Method Not Convert Then Show Error In Your Console.
  • In local Development use Live Server For Convert  Fethod method url to Http response

Code sandbox Online Project Example My insideFolder.txt File:
https://vmiy4.csb.app/src/insideFolder.txt


Read insideFolder.txt:

//Read InsideFolder.txt File
fetch("./src/insideFolder.txt").then(function(response) {
  response.text().then(function(text) {
    document.getElementById("appData").innerHTML =text  
  });
});
Read Txt File Inside Folder 
  • Inside Fetch Method, We Pass  Absolute File Path. In My Case My File Inside src Folder. so we use the Absolute path look like "./src/rootFolder.txt". then use text() method Get data to the  Response.
  • Do Not use  Import File, Inside Fetch Method URL.
  • Make Sure Your File Access With URL (Checkout My Example url).
  • When Add File Path With Live Server. Now Fetch Method Convert To a URL. If fetch Method Not Convert Then Show Error In Your Console.
  • In local Development use Live Server For Convert  Fethod method url to Http response

Code sandbox Online Project Example My insideFolder.txt File:
https://vmiy4.csb.app/rootFolder.txt


Demo:

Demo And Download

Download My Project Code And Play Online On CodeSandBox


Reference:

Fetch API
The Fetch API provides an interface for fetching resources (including across the network). It will seem familiar to anyone who has used XMLHttpRequest, but the new API provides a more powerful and flexible feature set.
JavaScript | fetch() Method - GeeksforGeeks
A computer science portal for geeks. It contains well written, well thought and well explained computer science and programming articles, quizzes and practice/competitive programming/company interview Questions.

Contact me