Here.
You can see I opened my web editor and create a HTML file, index.html, and I open this file in my
browser using live server extension, and I'm going to open my console in my browser.
In this video we are going to read a text file using fetch method.
And you can see in my directory I create a folder named content.
And inside this content folder I already create a text file, and in this text file I type some dummy
text.
So I want to read this text file in our HTML page.
For this I am going to type script tag inside our body tag.
And now I'm going to use our method fetch.
And inside the curly braces, we need to provide the path of our text file content slash text dot txt.
Whenever this file send data in response to retrieve this data, we need to use then function.
Dot.
Then inside the round braces I am going to create another function.
We receive our response in this function.
So I'm going to create a variable name response.
You can take any name for this variable, but the fact is we work on ES6 version.
So you can use arrow function.
So I'm going to convert this function into an arrow function.
First I remove function keyword.
Then I use arrow sign inside the curly braces.
Whatever response we get from our server, we just return.
But first I want to print in our console what we get from our server console dot log inside the round
braces response.
And if I save this file, you can see in my console we get a lot of things from our server as response.
URL body header status code, and we already know if our server response is successful, then our status
code would be 200.
These are not very useful information.
We just want to access our main content, our file return text.
So we need to use another method to retrieve the text response dot text.
And if I save this file you can see in my console our promise state fulfilled and our promise result
is our text content.
So our then function returns a promise.
And now I'm going to return the text because our then function returns a promise.
And now I'm going to create another Dehn function after this dense function.
So I'm going to copy the function.
And I'm going to call this function right behind on this function.
And whatever our first then function return to store this value I'm going to create another variable
in our new then function data.
And now I'm going to print this data in our console.
Console dot log inside the round braces data.
And if I save this file now you can see in my console it print our exact content.
What we want to access from our server.
Not only that we can print in our browser document dot write inside the round braces data.
And if I save this file, you can see in my browser it print the file data in our browser and we can
make our code more smaller.
Basically we use arrow function.
So we don't need to write return statement for this.
So I'm going to remove it and make it one liner.
And we are going to follow the similar step for our second then function.
And if I save this file, you can see the same result.
If we use fetch method in our arrow function, then just we need to write one line of code to retrieve
data from the server.
Here we retrieve normal text from our server.
Now I want to retrieve Json data from server.
For this I'm going to use fake data.
So I open a new tab fetch Json data.
And I'm going to use this website Json placeholder.
You can use any website, but most of the time I like to use this website.
And if I scroll down a little bit and here you can see how we can use fake Json data with fetch API.
And if you scroll down a little bit you can see some Json resource.
And this time I'm going to access user data.
And if I click on it you can see ten user's data.
You can see their name, their ID, their email, their addresses.
It's a fake data.
So I'm going to use this data.
You can see in my browser this Json data is well organized because I use Json viewer extension.
Maybe in your browser it is not well predefined.
So I suggest you download this extension.
And I'm going to copy this URL.
And I'm going to replace our local file path with this URL.
So now we trying to access Json file.
So we need to use response dot Json method.
And I want to print our Json file in my console console dot log inside the parenthesis data.
And if I save this file you can see in my console we get ten record as an object.
And if I open it you can see the same information name, user name, email, user address, user phone
number, user website, etcetera.
So using face API we can retrieve Json data.
And if you work with PHP file, similarly it provides Json data.
And as I told you earlier, when we run fetch method it not mean it's always return success.
It also can return error if file not available in server sometimes server not response.
To resolve this kind of problem we use catch method.
So I'm going to use dot catch.
And we already learned about catch in our previous videos.
Inside the round braces I'm going to take a variable name error.
And I'm going to use error function.
And in my console I'm going to print our error.
If I save this file you can see in my console there is no error because our request worked successfully.
But if I change the URL path and I'm going to remove you from user now there is no file name occurs
in that server.
And if I save this file you can see there is an error.
We don't get any proper message, but just it show 404 means file not found.
And if I show you the network section and you can see the file name is status 404, type fetch.
And also you can see size and response time.
And now I want to print this data in our document means in our browser.
For this we need to use foreign loop.
So I'm going to remove this console dot log section.
And I type curly brace inside the curly brace.
And I'm going to use foreign loop four.
Inside the round braces were a in data.
Then inside the round braces document dot write a.
What do you think.
Is it going to print all the document at once?
No.
Let's run the code.
You can see it.
Print ten numbers 0 to 9.
And once again I'm going to show you the console console dot log data.
And if I run this code you can see in my console oops I did some silly mistake.
We need to write this console dot log section outside the for loop.
And if I run this code you can see it's written an object.
But inside the object there are ten more objects 0123456789.
So we need to print their values to get proper result.
To retrieve this value we are going to use a variable value a means object key.
So inside the round braces I'm going to type data.
And inside the square braces I'm going to pass the key variable.
And if I save this file you can see in my browser it's print object object object.
Because there are more objects inside this object, we cannot print object like this.
We need to define exact object key.
Suppose I want to print object name.
So inside the document dot write function I'm going to use template string method inside the backticks
dollar sign and curly brace.
And I'm going to pass data and square braces.
And then I use BR tag for break the line.
First I declare our index.
Then we need to declare our exact key.
So I type dot name.
And if I save this file now you can see in my browser all the user name.
And if you want to print user email with their name I'm going to type dash dash.
And I'm going to duplicate this code.
And I replace name with their email.
And if I save this file now you can see in my browser it print user name and their email.
Also you can see in my console.
Similarly you.
You can use all the key to retrieve particular data, and you can see inside the object zero.
There is another object name address, and now you decide to print user city from the address.
In that case, first you need to use address, keyword dot address.
And once again you need to use dot to specify the exact query.
And I only want to retrieve city from the address bar.
So I type dot city.
And if I save this file now you can see in my browser it print user name with their city.
So in that way we can print data in a table.
If you notice here we retrieve Json data from online server and we also retrieve Json data from local
file.
Let me show you the example.
If I show you my current working directory, you can see there is a folder named content.
And inside the content folder I already created a Json file named student dot Json, and inside this
Json file I already insert some data, student name, student age, and their city.
And now I want to retrieve this local data using fetch API.
So first I am going to change our file path content slash our file name student dot Json.
So first I am going to stop this for loop.
So I'm going to comment out this because their key is different.
First I want to show the data in our console.
If I save this file you can see in my console we receive two data and you can see our student details.
And our keys are name, age and city.
And if you want to show the data using for loop.
And once again I am going to enable this for loop.
And I don't need to address section.
So I'm going to remove it.
And I just want to print student name and their city.
And if I save this file you can see the result in our browser.
It print student name and their city.
And if you want to show dynamic error message on your browser, you can insert the cache method.
I'm going to type document dot write can't fetch data and I'm going to change our file path.
I'm going to remove S from student.
And if I save the file you can see in my browser it print our cache function message can't fetch data.
And if I show you my console you can see it's print 404 means file not found.
So I hope now you understand how it's work.
In the next tutorial, I'm going to show you how we can insert data in live server using fetch API.
Thanks for watching this video.