Skip to content

WebNinjaDeveloper.com

Programming Tutorials




Menu
  • Home
  • Youtube Channel
  • Official Blog
  • Nearby Places Finder
  • Direction Route Finder
  • Distance & Time Calculator
Menu

Javascript Fetch API Tutorial to Read Local Text File and Display it in Browser Using Async Await

Posted on November 17, 2022

 

 

Welcome folks today in this blog post we will be reading the content of local text file and display it in browser using fetch api and async await in javascript. All the full source code of the application is shown below.

 

 

Get Started

 

 

In order to get started you need to make an index.html file and copy paste the following code

 

 

index.html

 

 

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>FETCH API (XMLHTTPREQUEST OBJECT) AJAX</title>
</head>
<body>
    <div id="result"></div>
</body>
 
</html>

 

 

As you can see we have added the div element and we have given the id which is result. And here we will be displaying the content of the text file using the fetch api and async await.

 

 

Now just create the text file called file.txt inside the root directory and copy paste the following code

 

 

file.txt

 

 

1
KANE WILLIAMSON IS THE CAPTAIN OF NEW ZEALAND.

 

 

Fetching Content of Text File Using FETCH API

 

 

Now we will be fetching the content of the text file using the fetch api in the browser. For this we need to add the javascript code as shown below

 

 

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
let file = "file.txt"
 
    // fetch api
 
    fetch(file)
    .then((x) => {
        console.log(x)
        return x.text()
    })
    .then((y) => {
        document.getElementById('result').innerHTML = y
    })

 

 

As you can see in the above code we are declaring the path of the file which is stored in the root directory. And then we are initializing the fetch api constructor and it is returning the promise we can handle it using the then statement. And then inside it we are converting the response to text using the text() method. And again it returns the promise inside it we are attaching the value or response coming inside the divelement. We are manipulating the innerHTML property and assigning the response as shown above.

 

 

 

 

 

Fetching Content of Text File Using Async & Await

 

 

Now we will be doing the same thing using the async and await statement with the fetch api. We can handle the promises using the async and await. This will considerably reduces the amount of code and complexity also. You can see the code as shown below

 

 

JavaScript
1
2
3
4
5
6
7
getText("file.txt")
 
   async function getText(file){
    let x = await fetch(file)
    let y = await x.text()
    document.getElementById('result').innerHTML = y
   }

 

 

As you can see in the above code we are calling the custom function and passing the path of the text file. And then inside the function we are calling the fetch api. And we are using the await statement. And then we are converting the response to text using the text() method. And then we are attaching the response to the div element using the id. And here we are manipulating the innerHTML property to the response.

 

Recent Posts

  • Android Java Project to Crop,Scale & Rotate Images Selected From Gallery and Save it inside SD Card
  • Android Kotlin Project to Load Image From URL into ImageView Widget
  • Android Java Project to Make HTTP Call to JSONPlaceholder API and Display Data in RecyclerView Using GSON & Volley Library
  • Android Java Project to Download Youtube Video Thumbnail From URL & Save it inside SD Card
  • Android Java Project to Embed Google Maps & Add Markers Using Maps SDK
  • Angular
  • Bunjs
  • C#
  • Deno
  • django
  • Electronjs
  • java
  • javascript
  • Koajs
  • kotlin
  • Laravel
  • meteorjs
  • Nestjs
  • Nextjs
  • Nodejs
  • PHP
  • Python
  • React
  • ReactNative
  • Svelte
  • Tutorials
  • Vuejs




©2023 WebNinjaDeveloper.com | Design: Newspaperly WordPress Theme