1 00:00:00,080 --> 00:00:00,290 Here. 2 00:00:00,290 --> 00:00:08,030 You can see I opened my web editor and create a HTML file, index.html, and I open this file in my 3 00:00:08,030 --> 00:00:13,460 browser using live server extension, and I'm going to open my console in my browser. 4 00:00:13,760 --> 00:00:17,750 In this video we are going to read a text file using fetch method. 5 00:00:18,050 --> 00:00:22,580 And you can see in my directory I create a folder named content. 6 00:00:22,670 --> 00:00:29,480 And inside this content folder I already create a text file, and in this text file I type some dummy 7 00:00:29,510 --> 00:00:30,170 text. 8 00:00:30,740 --> 00:00:35,060 So I want to read this text file in our HTML page. 9 00:00:35,630 --> 00:00:40,040 For this I am going to type script tag inside our body tag. 10 00:00:40,940 --> 00:00:43,550 And now I'm going to use our method fetch. 11 00:00:43,730 --> 00:00:51,710 And inside the curly braces, we need to provide the path of our text file content slash text dot txt. 12 00:00:51,950 --> 00:00:58,730 Whenever this file send data in response to retrieve this data, we need to use then function. 13 00:00:59,610 --> 00:01:00,240 Dot. 14 00:01:00,270 --> 00:01:04,860 Then inside the round braces I am going to create another function. 15 00:01:04,980 --> 00:01:07,170 We receive our response in this function. 16 00:01:07,170 --> 00:01:10,460 So I'm going to create a variable name response. 17 00:01:10,470 --> 00:01:15,990 You can take any name for this variable, but the fact is we work on ES6 version. 18 00:01:15,990 --> 00:01:17,910 So you can use arrow function. 19 00:01:17,910 --> 00:01:20,850 So I'm going to convert this function into an arrow function. 20 00:01:21,150 --> 00:01:23,250 First I remove function keyword. 21 00:01:23,730 --> 00:01:27,390 Then I use arrow sign inside the curly braces. 22 00:01:27,900 --> 00:01:31,590 Whatever response we get from our server, we just return. 23 00:01:32,210 --> 00:01:38,900 But first I want to print in our console what we get from our server console dot log inside the round 24 00:01:38,900 --> 00:01:41,410 braces response. 25 00:01:41,420 --> 00:01:48,440 And if I save this file, you can see in my console we get a lot of things from our server as response. 26 00:01:49,410 --> 00:01:57,870 URL body header status code, and we already know if our server response is successful, then our status 27 00:01:57,870 --> 00:01:59,310 code would be 200. 28 00:01:59,340 --> 00:02:01,590 These are not very useful information. 29 00:02:01,770 --> 00:02:06,900 We just want to access our main content, our file return text. 30 00:02:06,900 --> 00:02:12,990 So we need to use another method to retrieve the text response dot text. 31 00:02:12,990 --> 00:02:19,050 And if I save this file you can see in my console our promise state fulfilled and our promise result 32 00:02:19,050 --> 00:02:21,330 is our text content. 33 00:02:21,600 --> 00:02:24,690 So our then function returns a promise. 34 00:02:24,690 --> 00:02:30,030 And now I'm going to return the text because our then function returns a promise. 35 00:02:30,740 --> 00:02:34,970 And now I'm going to create another Dehn function after this dense function. 36 00:02:35,210 --> 00:02:37,100 So I'm going to copy the function. 37 00:02:37,100 --> 00:02:40,700 And I'm going to call this function right behind on this function. 38 00:02:40,820 --> 00:02:47,180 And whatever our first then function return to store this value I'm going to create another variable 39 00:02:47,180 --> 00:02:49,700 in our new then function data. 40 00:02:49,880 --> 00:02:52,670 And now I'm going to print this data in our console. 41 00:02:52,820 --> 00:02:56,450 Console dot log inside the round braces data. 42 00:02:56,810 --> 00:03:02,330 And if I save this file now you can see in my console it print our exact content. 43 00:03:02,360 --> 00:03:05,110 What we want to access from our server. 44 00:03:05,120 --> 00:03:07,340 What we want to access from our server. 45 00:03:07,490 --> 00:03:14,090 Not only that we can print in our browser document dot write inside the round braces data. 46 00:03:14,360 --> 00:03:20,270 And if I save this file, you can see in my browser it print the file data in our browser and we can 47 00:03:20,270 --> 00:03:22,190 make our code more smaller. 48 00:03:22,220 --> 00:03:24,110 Basically we use arrow function. 49 00:03:24,110 --> 00:03:27,410 So we don't need to write return statement for this. 50 00:03:27,590 --> 00:03:30,950 So I'm going to remove it and make it one liner. 51 00:03:30,950 --> 00:03:34,700 And we are going to follow the similar step for our second then function. 52 00:03:35,440 --> 00:03:38,380 And if I save this file, you can see the same result. 53 00:03:38,500 --> 00:03:44,770 If we use fetch method in our arrow function, then just we need to write one line of code to retrieve 54 00:03:44,770 --> 00:03:46,030 data from the server. 55 00:03:46,210 --> 00:03:49,450 Here we retrieve normal text from our server. 56 00:03:49,600 --> 00:03:52,320 Now I want to retrieve Json data from server. 57 00:03:52,330 --> 00:03:54,950 For this I'm going to use fake data. 58 00:03:54,970 --> 00:03:58,480 So I open a new tab fetch Json data. 59 00:03:59,670 --> 00:04:02,970 And I'm going to use this website Json placeholder. 60 00:04:03,000 --> 00:04:07,410 You can use any website, but most of the time I like to use this website. 61 00:04:07,560 --> 00:04:13,560 And if I scroll down a little bit and here you can see how we can use fake Json data with fetch API. 62 00:04:13,710 --> 00:04:17,850 And if you scroll down a little bit you can see some Json resource. 63 00:04:17,940 --> 00:04:20,460 And this time I'm going to access user data. 64 00:04:20,460 --> 00:04:24,090 And if I click on it you can see ten user's data. 65 00:04:24,090 --> 00:04:27,930 You can see their name, their ID, their email, their addresses. 66 00:04:27,960 --> 00:04:29,190 It's a fake data. 67 00:04:29,190 --> 00:04:31,020 So I'm going to use this data. 68 00:04:31,020 --> 00:04:37,140 You can see in my browser this Json data is well organized because I use Json viewer extension. 69 00:04:37,140 --> 00:04:40,410 Maybe in your browser it is not well predefined. 70 00:04:40,410 --> 00:04:43,140 So I suggest you download this extension. 71 00:04:43,140 --> 00:04:45,090 And I'm going to copy this URL. 72 00:04:45,540 --> 00:04:49,050 And I'm going to replace our local file path with this URL. 73 00:04:49,290 --> 00:04:52,020 So now we trying to access Json file. 74 00:04:52,650 --> 00:04:56,280 So we need to use response dot Json method. 75 00:04:56,730 --> 00:05:03,390 And I want to print our Json file in my console console dot log inside the parenthesis data. 76 00:05:03,390 --> 00:05:09,270 And if I save this file you can see in my console we get ten record as an object. 77 00:05:09,630 --> 00:05:18,120 And if I open it you can see the same information name, user name, email, user address, user phone 78 00:05:18,120 --> 00:05:19,920 number, user website, etcetera. 79 00:05:20,490 --> 00:05:23,880 So using face API we can retrieve Json data. 80 00:05:24,210 --> 00:05:28,920 And if you work with PHP file, similarly it provides Json data. 81 00:05:28,920 --> 00:05:35,370 And as I told you earlier, when we run fetch method it not mean it's always return success. 82 00:05:35,400 --> 00:05:41,850 It also can return error if file not available in server sometimes server not response. 83 00:05:41,850 --> 00:05:45,300 To resolve this kind of problem we use catch method. 84 00:05:45,300 --> 00:05:47,880 So I'm going to use dot catch. 85 00:05:47,880 --> 00:05:51,780 And we already learned about catch in our previous videos. 86 00:05:51,960 --> 00:05:56,130 Inside the round braces I'm going to take a variable name error. 87 00:05:56,520 --> 00:05:58,500 And I'm going to use error function. 88 00:05:58,650 --> 00:06:01,290 And in my console I'm going to print our error. 89 00:06:01,710 --> 00:06:07,680 If I save this file you can see in my console there is no error because our request worked successfully. 90 00:06:07,680 --> 00:06:15,090 But if I change the URL path and I'm going to remove you from user now there is no file name occurs 91 00:06:15,300 --> 00:06:16,470 in that server. 92 00:06:16,470 --> 00:06:20,130 And if I save this file you can see there is an error. 93 00:06:20,130 --> 00:06:25,830 We don't get any proper message, but just it show 404 means file not found. 94 00:06:25,830 --> 00:06:34,350 And if I show you the network section and you can see the file name is status 404, type fetch. 95 00:06:34,350 --> 00:06:37,020 And also you can see size and response time. 96 00:06:37,020 --> 00:06:41,400 And now I want to print this data in our document means in our browser. 97 00:06:41,400 --> 00:06:44,220 For this we need to use foreign loop. 98 00:06:44,220 --> 00:06:46,860 So I'm going to remove this console dot log section. 99 00:06:46,860 --> 00:06:49,740 And I type curly brace inside the curly brace. 100 00:06:49,740 --> 00:06:52,530 And I'm going to use foreign loop four. 101 00:06:52,530 --> 00:06:56,250 Inside the round braces were a in data. 102 00:06:56,970 --> 00:07:01,200 Then inside the round braces document dot write a. 103 00:07:02,190 --> 00:07:03,240 What do you think. 104 00:07:03,270 --> 00:07:05,820 Is it going to print all the document at once? 105 00:07:05,830 --> 00:07:06,710 No. 106 00:07:06,720 --> 00:07:07,830 Let's run the code. 107 00:07:08,070 --> 00:07:09,090 You can see it. 108 00:07:09,090 --> 00:07:11,850 Print ten numbers 0 to 9. 109 00:07:11,850 --> 00:07:16,380 And once again I'm going to show you the console console dot log data. 110 00:07:16,800 --> 00:07:21,840 And if I run this code you can see in my console oops I did some silly mistake. 111 00:07:21,870 --> 00:07:25,650 We need to write this console dot log section outside the for loop. 112 00:07:25,650 --> 00:07:29,160 And if I run this code you can see it's written an object. 113 00:07:29,160 --> 00:07:35,760 But inside the object there are ten more objects 0123456789. 114 00:07:35,880 --> 00:07:39,510 So we need to print their values to get proper result. 115 00:07:39,540 --> 00:07:45,360 To retrieve this value we are going to use a variable value a means object key. 116 00:07:45,540 --> 00:07:48,930 So inside the round braces I'm going to type data. 117 00:07:49,230 --> 00:07:53,580 And inside the square braces I'm going to pass the key variable. 118 00:07:53,580 --> 00:07:58,680 And if I save this file you can see in my browser it's print object object object. 119 00:07:58,680 --> 00:08:04,080 Because there are more objects inside this object, we cannot print object like this. 120 00:08:04,110 --> 00:08:06,840 We need to define exact object key. 121 00:08:07,320 --> 00:08:09,780 Suppose I want to print object name. 122 00:08:10,170 --> 00:08:16,800 So inside the document dot write function I'm going to use template string method inside the backticks 123 00:08:17,250 --> 00:08:19,170 dollar sign and curly brace. 124 00:08:19,650 --> 00:08:22,350 And I'm going to pass data and square braces. 125 00:08:23,040 --> 00:08:26,160 And then I use BR tag for break the line. 126 00:08:26,820 --> 00:08:28,950 First I declare our index. 127 00:08:29,280 --> 00:08:31,590 Then we need to declare our exact key. 128 00:08:31,980 --> 00:08:34,290 So I type dot name. 129 00:08:34,290 --> 00:08:39,330 And if I save this file now you can see in my browser all the user name. 130 00:08:39,900 --> 00:08:45,090 And if you want to print user email with their name I'm going to type dash dash. 131 00:08:45,180 --> 00:08:47,070 And I'm going to duplicate this code. 132 00:08:47,100 --> 00:08:49,350 And I replace name with their email. 133 00:08:49,770 --> 00:08:55,740 And if I save this file now you can see in my browser it print user name and their email. 134 00:08:55,740 --> 00:08:57,810 Also you can see in my console. 135 00:08:58,140 --> 00:08:59,100 Similarly you. 136 00:08:59,200 --> 00:09:05,110 You can use all the key to retrieve particular data, and you can see inside the object zero. 137 00:09:05,200 --> 00:09:12,910 There is another object name address, and now you decide to print user city from the address. 138 00:09:13,150 --> 00:09:18,520 In that case, first you need to use address, keyword dot address. 139 00:09:18,970 --> 00:09:23,530 And once again you need to use dot to specify the exact query. 140 00:09:23,530 --> 00:09:26,740 And I only want to retrieve city from the address bar. 141 00:09:26,740 --> 00:09:28,900 So I type dot city. 142 00:09:28,900 --> 00:09:35,880 And if I save this file now you can see in my browser it print user name with their city. 143 00:09:35,890 --> 00:09:38,710 So in that way we can print data in a table. 144 00:09:39,190 --> 00:09:46,360 If you notice here we retrieve Json data from online server and we also retrieve Json data from local 145 00:09:46,360 --> 00:09:46,810 file. 146 00:09:47,380 --> 00:09:49,140 Let me show you the example. 147 00:09:49,150 --> 00:09:53,980 If I show you my current working directory, you can see there is a folder named content. 148 00:09:53,980 --> 00:10:00,510 And inside the content folder I already created a Json file named student dot Json, and inside this 149 00:10:00,510 --> 00:10:05,640 Json file I already insert some data, student name, student age, and their city. 150 00:10:05,640 --> 00:10:09,180 And now I want to retrieve this local data using fetch API. 151 00:10:09,930 --> 00:10:17,400 So first I am going to change our file path content slash our file name student dot Json. 152 00:10:18,120 --> 00:10:20,130 So first I am going to stop this for loop. 153 00:10:20,130 --> 00:10:24,510 So I'm going to comment out this because their key is different. 154 00:10:24,900 --> 00:10:27,350 First I want to show the data in our console. 155 00:10:27,360 --> 00:10:34,050 If I save this file you can see in my console we receive two data and you can see our student details. 156 00:10:34,050 --> 00:10:37,080 And our keys are name, age and city. 157 00:10:37,350 --> 00:10:39,690 And if you want to show the data using for loop. 158 00:10:39,690 --> 00:10:41,940 And once again I am going to enable this for loop. 159 00:10:42,330 --> 00:10:44,100 And I don't need to address section. 160 00:10:44,100 --> 00:10:45,480 So I'm going to remove it. 161 00:10:46,140 --> 00:10:48,990 And I just want to print student name and their city. 162 00:10:49,140 --> 00:10:52,440 And if I save this file you can see the result in our browser. 163 00:10:52,440 --> 00:10:54,810 It print student name and their city. 164 00:10:54,810 --> 00:11:00,210 And if you want to show dynamic error message on your browser, you can insert the cache method. 165 00:11:00,210 --> 00:11:07,770 I'm going to type document dot write can't fetch data and I'm going to change our file path. 166 00:11:07,800 --> 00:11:10,410 I'm going to remove S from student. 167 00:11:10,800 --> 00:11:17,250 And if I save the file you can see in my browser it print our cache function message can't fetch data. 168 00:11:18,000 --> 00:11:24,330 And if I show you my console you can see it's print 404 means file not found. 169 00:11:24,330 --> 00:11:27,150 So I hope now you understand how it's work. 170 00:11:27,360 --> 00:11:33,480 In the next tutorial, I'm going to show you how we can insert data in live server using fetch API. 171 00:11:33,690 --> 00:11:35,220 Thanks for watching this video.