All language subtitles for 007 Using API Routes To Get Data_Downloadly.ir_en

af Afrikaans
sq Albanian
am Amharic
ar Arabic
hy Armenian
az Azerbaijani
eu Basque
be Belarusian
bn Bengali
bs Bosnian
bg Bulgarian
ca Catalan
ceb Cebuano
ny Chichewa
zh-CN Chinese (Simplified)
zh-TW Chinese (Traditional)
co Corsican
hr Croatian
cs Czech
da Danish
nl Dutch
en English
eo Esperanto
et Estonian
tl Filipino
fi Finnish
fr French
fy Frisian
gl Galician
ka Georgian
de German
el Greek
gu Gujarati
ht Haitian Creole
ha Hausa
haw Hawaiian
iw Hebrew
hi Hindi
hmn Hmong
hu Hungarian
is Icelandic
ig Igbo
id Indonesian
ga Irish
it Italian
ja Japanese
jw Javanese
kn Kannada
kk Kazakh
km Khmer
ko Korean
ku Kurdish (Kurmanji)
ky Kyrgyz
lo Lao
la Latin
lv Latvian
lt Lithuanian
lb Luxembourgish
mk Macedonian
mg Malagasy
ms Malay
ml Malayalam
mt Maltese
mi Maori
mr Marathi
mn Mongolian
my Myanmar (Burmese)
ne Nepali
no Norwegian
ps Pashto
fa Persian Download
pl Polish
pt Portuguese
pa Punjabi
ro Romanian
ru Russian
sm Samoan
gd Scots Gaelic
sr Serbian
st Sesotho
sn Shona
sd Sindhi
si Sinhala
sk Slovak
sl Slovenian
so Somali
es Spanish
su Sundanese
sw Swahili
sv Swedish
tg Tajik
ta Tamil
te Telugu
th Thai
tr Turkish
uk Ukrainian
ur Urdu
uz Uzbek
vi Vietnamese
cy Welsh
xh Xhosa
yi Yiddish
yo Yoruba
zu Zulu
or Odia (Oriya)
rw Kinyarwanda
tk Turkmen
tt Tatar
ug Uyghur
Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated: 1 00:00:02,040 --> 00:00:05,760 Okay. So now we know what API routes are, 2 00:00:05,760 --> 00:00:08,070 that we can write server-side code there, 3 00:00:08,070 --> 00:00:10,630 Node.js code to be specific, 4 00:00:10,630 --> 00:00:13,730 that we can handle different kinds of requests, 5 00:00:13,730 --> 00:00:15,170 that we can extract data, 6 00:00:15,170 --> 00:00:19,050 and then run any kind of Node.js code we want. 7 00:00:19,050 --> 00:00:20,970 We can then also send back a response 8 00:00:20,970 --> 00:00:23,420 or different responses depending 9 00:00:23,420 --> 00:00:25,760 on the kind of request sent. 10 00:00:25,760 --> 00:00:28,870 And so, for example, if I still enter a request 11 00:00:28,870 --> 00:00:31,770 and send it to slash API slash feedback 12 00:00:31,770 --> 00:00:34,980 through the browser URL bar, 13 00:00:34,980 --> 00:00:37,710 that will automatically be a get request. 14 00:00:37,710 --> 00:00:40,680 Therefore, it will not trigger this if block 15 00:00:40,680 --> 00:00:43,730 or it'll not make it into this if block 16 00:00:43,730 --> 00:00:46,670 because the method is not post, but get. 17 00:00:46,670 --> 00:00:49,410 And therefore this line of code will execute 18 00:00:49,410 --> 00:00:51,623 which is why we see this response. 19 00:00:52,560 --> 00:00:54,490 And now that we got this response, 20 00:00:54,490 --> 00:00:57,440 of course, let me also make it crystal clear 21 00:00:57,440 --> 00:01:00,410 that you can also handle incoming get requests 22 00:01:00,410 --> 00:01:02,140 in whichever way you want. 23 00:01:02,140 --> 00:01:06,260 So for example, here, let's say for incoming get requests 24 00:01:06,260 --> 00:01:08,170 we wanna get access 25 00:01:08,170 --> 00:01:13,160 to all our feedback objects that were stored 26 00:01:13,160 --> 00:01:16,050 and return those as JSON. 27 00:01:16,050 --> 00:01:18,470 So that in our front end application, 28 00:01:18,470 --> 00:01:21,750 we could also send a behind the scenes request 29 00:01:21,750 --> 00:01:25,080 to fetch all feedback entries 30 00:01:25,080 --> 00:01:27,870 and display them on the screen. 31 00:01:27,870 --> 00:01:31,690 So to achieve this in our API feedback route 32 00:01:31,690 --> 00:01:33,980 I will basically repeat the code 33 00:01:33,980 --> 00:01:37,340 from up there to get access to my file 34 00:01:37,340 --> 00:01:40,070 And hence we can copy that code, 35 00:01:40,070 --> 00:01:42,900 or, to avoid code duplication, 36 00:01:42,900 --> 00:01:47,900 create helper functions like buildFeedbackPath, let's say, 37 00:01:49,470 --> 00:01:53,530 where I simply return this file path 38 00:01:53,530 --> 00:01:54,800 which I create here. 39 00:01:54,800 --> 00:01:59,270 So where I return this, so that down there 40 00:01:59,270 --> 00:02:02,173 we can just execute buildFeedbackPath, 41 00:02:03,440 --> 00:02:05,783 and then do this again here in the else block. 42 00:02:06,810 --> 00:02:11,670 And also to then get our file data, 43 00:02:11,670 --> 00:02:13,923 we can create another function. 44 00:02:15,960 --> 00:02:20,120 extractFeedback could be the function name and 45 00:02:20,120 --> 00:02:24,667 in extractFeedback, I in the end wanna execute that code, 46 00:02:25,920 --> 00:02:29,940 so we can copy that code, move that in there. 47 00:02:29,940 --> 00:02:33,480 Expect the file path as a parameter, 48 00:02:33,480 --> 00:02:37,443 and then simply return the parsed data as a response. 49 00:02:39,530 --> 00:02:44,530 And then below here in that code, we can now get our data 50 00:02:44,650 --> 00:02:48,890 by calling extract feedback and passing our file path 51 00:02:48,890 --> 00:02:50,570 as a argument. 52 00:02:50,570 --> 00:02:51,840 With that refactoring, 53 00:02:51,840 --> 00:02:56,480 we can repeat that down here in the else block. 54 00:02:56,480 --> 00:02:58,450 And then we got that extracted 55 00:02:58,450 --> 00:03:02,290 and parsed feedback data in that data constant. 56 00:03:02,290 --> 00:03:03,350 And hence, instead 57 00:03:03,350 --> 00:03:06,830 of sending back this dummy, 'this works' message, 58 00:03:06,830 --> 00:03:10,200 we could send back our feedback, our data 59 00:03:10,200 --> 00:03:12,673 which we're extracting from the feedback file. 60 00:03:13,610 --> 00:03:16,210 And if we do that and save this 61 00:03:16,210 --> 00:03:19,740 if I now reload slash API slash feedback 62 00:03:19,740 --> 00:03:21,763 we see that this also works. 63 00:03:22,630 --> 00:03:26,300 But of course we typically don't add an API route 64 00:03:26,300 --> 00:03:31,300 so that users have to enter them in their URL bar. 65 00:03:31,750 --> 00:03:35,470 That's not the user experience we typically wanna offer. 66 00:03:35,470 --> 00:03:38,800 Instead, maybe on local host slash 3000, 67 00:03:38,800 --> 00:03:40,750 we wanna have a button 68 00:03:40,750 --> 00:03:45,750 that loads all the stored feedback items from that API route 69 00:03:46,160 --> 00:03:50,050 or with help of that API route when it's clicked. 70 00:03:50,050 --> 00:03:54,120 So on index.js, below the form, 71 00:03:54,120 --> 00:03:55,800 we'll add a horizontal line, 72 00:03:55,800 --> 00:03:58,870 and then a button where I say load feedback. 73 00:03:58,870 --> 00:04:00,520 And when that button is clicked, 74 00:04:00,520 --> 00:04:04,430 I wanna send a get request to my feedback API route 75 00:04:04,430 --> 00:04:07,823 to trigger this else block and get that feedback data. 76 00:04:08,840 --> 00:04:11,630 For this in the front end, in index.js 77 00:04:11,630 --> 00:04:15,460 in my homepage component, I add another function 78 00:04:15,460 --> 00:04:19,190 which should be triggered when this new button is clicked. 79 00:04:19,190 --> 00:04:22,750 And that could be the load feedback handler function. 80 00:04:22,750 --> 00:04:24,680 Name is up to you. 81 00:04:24,680 --> 00:04:27,440 And in there I also want to send a fetch request 82 00:04:27,440 --> 00:04:29,750 to slash API feedback. 83 00:04:29,750 --> 00:04:31,040 So I will actually copy 84 00:04:31,040 --> 00:04:34,460 that code from up there and paste it in here, 85 00:04:34,460 --> 00:04:38,220 but I will not set this configuration object 86 00:04:38,220 --> 00:04:41,130 because here I do wanna send a get request. 87 00:04:41,130 --> 00:04:45,020 I have no extra data that should be added to the request 88 00:04:45,020 --> 00:04:49,130 and I therefore also don't need to set any headers. 89 00:04:49,130 --> 00:04:51,580 So just sending a get request 90 00:04:51,580 --> 00:04:54,623 by just passing in the URL is enough. 91 00:04:55,600 --> 00:04:58,230 Now let's connect this loadFeedbackHandler 92 00:04:58,230 --> 00:04:59,700 to this button here 93 00:04:59,700 --> 00:05:03,210 through the onClick prop loadFeedbackHandler. 94 00:05:06,290 --> 00:05:09,200 And then we can of course do more useful things 95 00:05:09,200 --> 00:05:11,450 with our data here as well. 96 00:05:11,450 --> 00:05:14,030 Currently, we're just logging it to the console. 97 00:05:14,030 --> 00:05:15,660 We could also set some state 98 00:05:15,660 --> 00:05:17,960 that renders the feedback items. 99 00:05:17,960 --> 00:05:19,260 So let's maybe do that. 100 00:05:19,260 --> 00:05:22,310 Let's import useState from react, 101 00:05:22,310 --> 00:05:26,243 and let's register some state here by calling useState. 102 00:05:27,220 --> 00:05:29,530 And let's say initially we have an empty array 103 00:05:30,616 --> 00:05:33,150 for our feedbackItems state. 104 00:05:33,150 --> 00:05:37,100 And then a setFeedbackItems updating function. 105 00:05:37,100 --> 00:05:38,240 So that could be state 106 00:05:38,240 --> 00:05:40,760 which we now use in the homepage component. 107 00:05:40,760 --> 00:05:43,380 And now I wanna set my state whenever I did 108 00:05:43,380 --> 00:05:45,400 fetch my feedback data. 109 00:05:45,400 --> 00:05:48,410 So then here in the loadFeedbackHandler, 110 00:05:48,410 --> 00:05:50,990 instead of logging the feedback to the console, 111 00:05:50,990 --> 00:05:55,760 I'll call setFeedbackItems to update that feedback state. 112 00:05:55,760 --> 00:05:59,460 And I want to update it with that data that was fetched. 113 00:05:59,460 --> 00:06:01,960 Now, keep in mind that the data we're sending back 114 00:06:01,960 --> 00:06:04,620 will be an object with a feedback property 115 00:06:04,620 --> 00:06:07,170 which holds the actual data parsed 116 00:06:07,170 --> 00:06:09,050 from the feedback JSON file. 117 00:06:09,050 --> 00:06:11,600 And therefore it's this feedback property 118 00:06:11,600 --> 00:06:12,690 which will give us access 119 00:06:12,690 --> 00:06:16,060 to that feedback array stored in that file. 120 00:06:16,060 --> 00:06:19,570 Hence, when we work with our response data on the front end, 121 00:06:19,570 --> 00:06:24,000 we want to set data.feedback as our feedback items 122 00:06:24,000 --> 00:06:27,640 because that is then accessing that feedback property 123 00:06:27,640 --> 00:06:30,880 which is being set on the response and which therefore 124 00:06:30,880 --> 00:06:34,223 does hold those feedback items in that array. 125 00:06:35,700 --> 00:06:37,440 And now we're setting that state, 126 00:06:37,440 --> 00:06:40,620 and we can now use that state in our homepage component 127 00:06:40,620 --> 00:06:44,380 below the button to simply output an unordered list 128 00:06:44,380 --> 00:06:48,240 of feedback items 129 00:06:48,240 --> 00:06:53,240 which we map to list items where I then, for example, 130 00:06:53,550 --> 00:06:58,550 simply output item.text, because my feedback items 131 00:06:59,040 --> 00:07:03,220 as stored in feedback.json do have a text property 132 00:07:03,220 --> 00:07:06,110 and these are the items we're working with here. 133 00:07:06,110 --> 00:07:08,330 So we can output the text here. 134 00:07:08,330 --> 00:07:10,430 And since we're mapping, also set a key 135 00:07:10,430 --> 00:07:14,943 to item.id as a unique identifier per item. 136 00:07:15,900 --> 00:07:19,060 With all that implemented, if we save everything again, 137 00:07:19,060 --> 00:07:20,730 if I click load feedback, 138 00:07:20,730 --> 00:07:23,400 you see that data shows up here. 139 00:07:23,400 --> 00:07:26,360 And if I reload the page and open the network tab 140 00:07:26,360 --> 00:07:28,280 you see that if I click load feedback, 141 00:07:28,280 --> 00:07:30,830 a request is sent to feedback. 142 00:07:30,830 --> 00:07:35,830 It's a get request to my domain slash API slash feedback 143 00:07:36,080 --> 00:07:38,200 and there on the response you see 144 00:07:38,200 --> 00:07:41,420 we got that feedback data as JSON. 145 00:07:41,420 --> 00:07:44,920 So that is how we can then also send a get request 146 00:07:44,920 --> 00:07:46,720 to a API route. 147 00:07:46,720 --> 00:07:48,110 And the special thing here is 148 00:07:48,110 --> 00:07:50,670 that we do this behind the scenes 149 00:07:50,670 --> 00:07:54,163 with JavaScript on the already loaded page. 11759

Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.