Original subtitles

1 1

So now that we know about AJAX and API's, 2

2

let's actually make our first API call. 3

3

So in this lecture, we're gonna build 4

4

a nice UI component, such as this one here, 5

5

which contains data about a certain country. 6

6

And this data about the countries 7

7

is actually gonna come from a third party online API. 8

8

So just as we learned it in the last video. 9

9

So here, we have this first card for Portugal, 10

10

and then another card for the USA. 11

11

And of course, this would work 12

12

for any country in the world. 13

13

And this is actually really exciting stuff to me. 14

14

So I think it feels really magical, 15

15

and next level, to be able to do this. 16

16

So to kind of magically get this kind of data 17

17

from the internet, and then work with it 18

18

in any application that we're building. 19

19

And so let's now start working on this. 20

20

And as always, I already have my starter files 21

21

up here in VS Code. 22

22

And I also already started the live server, 23

23

and so that's what I have here open. 24

24

And so now let's get to work. 25

25

Now in JavaScript, there are actually multiple ways 26

26

of doing AJAX calls. 27

27

But we're gonna start with the most old school one. 28

28

And that's called the XML HTTP request function. 29

29

So we can do new XML HTTP request. 30

30

So just this one here. 31

31

So we call this function 32

32

and then all we need to do for now 33

33

is to store the result in a new variable. 34

34

So let's call this one request. 35

35

And so that's the first step 36

36

of using the XML HTTP request way 37

37

of doing AJAX calls. 38

38

Now again, as I mentioned, 39

39

this is the old school way of doing AJAX in JavaScript. 40

40

But I'm still showing it to you for two reasons. 41

41

So first, I want you to know that XML HTTP requests exists, 42

42

because you might actually need it in the future. 43

43

And second, I want to show you how AJAX calls 44

44

used to be handled with events 45

45

and callback functions. 46

46

And so only after that 47

47

we should move on to a more modern way 48

48

of handling asynchronous JavaScript, 49

49

which is gonna be a feature called Promises. 50

50

But anyway, next, we need the URL 51

51

to which we will make the AJAX call. 52

52

So we can now say, request, 53

53

so that object that we created here, .open. 54

54

And in here, first, 55

55

we need to pass in the type of request. 56

56

And remember that the type of HTTP request 57

57

to get data is simply called GET. 58

58

And second, we need a string containing the URL 59

59

to which the AJAX call should actually be made. 60

60

So let me now show you the API that I selected 61

61

for this project and also how we can use it 62

62

so that you can actually understand 63

63

how you could do something similar yourself. 64

64

So on GitHub, there is this huge repository, 65

65

as you can see here, which is called Public APIs. 66

66

And so if you just Google for that, 67

67

I'm sure that you will find it. 68

68

And here is a list of a ton of public 69

69

and free API's that you can use. 70

70

So we have all these different categories here. 71

71

And so there's really an API for everything. 72

72

So just as I said, in the last video, 73

73

and the one that we are going to use 74

74

is called rest countries. 75

75

So it's this one here, all right. 76

76

So we see here that, well this is a big table, 77

77

so we see that the API we are going to use 78

78

needs no authentication. 79

79

I think it uses HTTPS and I'm not sure about course. 80

80

And this one here is important. 81

81

So any API that you use here 82

82

should always have CORS set to Yes, 83

83

or maybe to Unknown, am I right? 84

84

And CORS stands for Cross Origin Resource Sharing. 85

85

And without CORS, we cannot access a third party API 86

86

from our own code, and so going back here, 87

87

well, now it's gone, here it is. 88

88

So you see, it doesn't need authentication, 89

89

and it uses HTTPS. 90

90

So this is a good one and so let's click it, 91

91

which will take us basically to the documentation page. 92

92

And now here, I'm simply looking 93

93

for a so called API endpoint. 94

94

And so the endpoint is essentially just another name 95

95

for the URL that we need. 96

96

So here we have the first URL, 97

97

and this one is basically for all countries. 98

98

So if we wanted to get a list of all the countries 99

99

from this API, we could make an AJAX call to this URL here. 100

100

Okay, but that's not what we want. 101

101

Instead, I want to search the API by country name. 102

102

And so therefore, this here is the URL 103

103

that I'm going to use. 104

104

So let's copy it and I hope that you followed 105

105

these steps here. 106

106

And if not, you can of course, simply paste it here. 107

107

Am I right? 108

108

And I will start with Portugal, 109

109

but you can, of course, use your own country. 110

110

So with this, we basically open the request. 111

111

And now next, we need to also send it. 112

112

So you see, there are a lot of steps involved 113

113

when using this way of doing an AJAX call. 114

114

Okay, so this will now send off the request 115

115

to this URL here. 116

116

Now, in order to get the result, 117

117

we couldn't simply do maybe something like this. 118

118

So set some variable simply to this result here. 119

119

And the reason why we cannot do this 120

120

is because the result is simply not there yet, right. 121

121

So this AJAX call that we just send off here, 122

122

is being done in the background, 123

123

while the rest of the code keeps running. 124

124

And so this is the asynchronous, 125

125

non-blocking behavior that we talked about 126

126

in the last lecture. 127

127

So let's get rid of this. 128

128

And instead, what we need to do 129

129

is to register a callback 130

130

on the request object for the load event. 131

131

So request, and then again, 132

132

our old friend, addEventListener. 133

133

And here on the request, 134

134

we will wait for the load event. 135

135

So again, here, we basically send off the request. 136

136

And so that request 137

137

then fetches the data in the background. 138

138

And then once that is done, 139

139

it will emit the load event. 140

140

And so using this event listener, 141

141

we are waiting for that event. 142

142

And so as soon as the data arrives, 143

143

this callback function here will be called. 144

144

Now, let's then actually log the result to the console. 145

145

So the this keyword inside of this function 146

146

is the request, right? 147

147

So we could also do request, 148

148

but let's just use the this keyword. 149

149

And then the response is in the property response text. 150

150

And again, this property here is of course, 151

151

only gonna be set 152

152

once the data has actually arrived, right. 153

153

So if we tried to set it out here, 154

154

then that wouldn't work, of course. 155

155

We can still try that just to see request.responsetext. 156

156

And so that would be exactly the same as this one. 157

157

And well, already, we have our first data here. 158

158

So that's great, and as you see, 159

159

this is the result of our very first AJAX call. 160

160

So great job, this already worked. 161

161

And you see that this kind of looks 162

162

like a bunch of data about Portugal indeed. 163

163

Now, we just need to convert this here 164

164

to an actual JavaScript object. 165

165

Because what we have here right now is JSON. 166

166

So remember that JSON is basically 167

167

just a big string of text. 168

168

And so what we need to do here is to then convert that. 169

169

We already did that before, actually. 170

170

So that's JSON.parsethis.responsetext. 171

171

So let's take a look at the data. 172

172

And by the way, as you see here, 173

173

of course, the result of request.responsetext 174

174

out here is nothing, right? 175

175

So let's get rid of it. 176

176

And so indeed, here we have this object 177

177

with all this data about Portugal. 178

178

So we have the capital, which is Lisbon, 179

179

we have the flag even. 180

180

So basically a link to the image of the flag. 181

181

And indeed, this is where we're gonna get 182

182

this flag here from 183

183

and then all kinds of other stuff, 184

184

like the location, the population, region, 185

185

and so on, and so forth. 186

186

Now, you'll see that this is actually 187

187

an array containing one object. 188

188

And so let's quickly de-structure that like this. 189

189

So remember, that would be the same thing as doing this. 190

190

Right, but of course, de-structuring 191

191

is a lot more beautiful. 192

192

And so now we get immediately the object here. 193

193

Great, and now we can actually build that card component. 194

194

And so let's copy the HTML here from this comment. 195

195

So open the index.HTML file, 196

196

get the HTML from there. 197

197

And then we can create a template literal, 198

198

that we then have to fill up. 199

199

Here, I'm of course, missing the name. 200

200

And as always, I'm calling it HTML. 201

201

And so now all we have to do is to replace this data. 202

202

So let's open it to see what we actually have. 203

203

So here, we are actually starting with the image. 204

204

So we need a source and of course, 205

205

that source can be any URL, 206

206

and doesn't have to be a local image 207

207

that we have on our computer. 208

208

And so the one we will use is this one here. 209

209

And so that is at data.flag. 210

210

Next up, this is where the actual name of the country goes. 211

211

So data. yeah, so down here is the name. 212

212

Then here, I also enter region. 213

213

So that would be Europe in this case. 214

214

And so this is the one. 215

215

So that's data.region. 216

216

And then finally, we also want some information 217

217

about the population, language, and currency. 218

218

And all of that is present here in this data, 219

219

so that's at data.population. 220

220

And so this here is basically 10 million. 221

221

So we don't want to display this entire number. 222

222

So let's just round it to 10.3 or 10.4 million. 223

223

So the way we can do that 224

224

is to convert this first two number. 225

225

So as always, I'm just using plus for that. 226

226

Then divide it by a million. 227

227

So yeah, that's a million. 228

228

And then let's round this value finally. 229

229

So this is a number and so on a number 230

230

we can call toFixed with one decimal place. 231

231

Next up language, so I'm doing this pretty fast 232

232

because here we are basically 233

233

just practicing what we already know, right? 234

234

So again, this one is for languages. 235

235

And so let's see, so languages is basically an array. 236

236

No, I clicked, and so now it's gone. 237

237

So let me just put something else here for now. 238

238

Because this was causing the error. 239

239

So let's see the languages 240

240

we have multiple here, as you see. 241

241

And so what we want is simply 242

242

the first element of the languages, and then the name. 243

243

Now it's the same as actually gonna happen 244

244

with the currencies. 245

245

So we also have an array of the currencies. 246

246

And then we want the name of the first one. 247

247

So again, we want to data.languages, 248

248

the first element, and from there, 249

249

we want to take the name, and the same with the currencies. 250

250

Currencies, right, and that should be it. 251

251

And now all we have to do 252

252

is to then actually insert this HTML into our page. 253

253

So I actually already have it here selected. 254

254

But just to make it complete, let me show it to you. 255

255

So we have this countries element here. 256

256

And so that's what I call the countries container. 257

257

And so here we want country.insertAdjacentHTML, 258

258

beforeend, and then the HTML that we just created. 259

259

Now finally, we also need to set the style 260

260

of this container to opacity one. 261

261

So let me show you that one also in the code. 262

262

So I set the opacity of the country's container 263

263

here to zero. 264

264

And so now we set it to one so that we can then see 265

265

a nice animation, which is gonna be triggered 266

266

by this transition okay. 267

267

First, let's give us some space 268

268

so we can then actually see it. 269

269

And so, as I just said, 270

270

we need to say countriesContainer.style.opacity 271

271

and set it to one. 272

272

And now as I save it, the data should appear and it does. 273

273

So that's amazing, right? 274

274

And it looks just like here in our demo. 275

275

So that's fantastic, 276

276

I really love it when it works just like this. 277

277

So getting data from some third party API 278

278

really feels like magic to me. 279

279

Now, let's actually reuse the same code here 280

280

to create an element like this for multiple countries. 281

281

And so what I'm gonna do 282

282

is to put all of this into a function. 283

283

Let's call it getCountryData. 284

284

And so this one will take a string 285

285

as an input of a country, okay. 286

286

So the curly brace down here. 287

287

And then here, instead of hard coding Portugal, 288

288

we will use that country that we get as an input. 289

289

All right, country, and to now down here, 290

290

we can then call this function, 291

291

getCountryData, Portugal. 292

292

So let's see, and yep, that worked just the same. 293

293

And now let's try another one. 294

294

So let's try the United States of America, 295

295

just like I had it in my demo, and here we go. 296

296

So now we have data about two countries. 297

297

And by calling these functions here twice, 298

298

we will basically have two AJAX calls 299

299

happening at the same time. 300

300

So in parallel, so to say. 301

301

And if we reload this page here a couple of times, 302

302

then they might appear in a different order. 303

303

And the reason for that is basically 304

304

that the data arrives at a slightly different time, 305

305

each time that we're loading the page. 306

306

And so in fact, this really shows 307

307

the non-blocking behavior in action. 308

308

So as we call getCountryData here with Portugal, 309

309

for the very first time, it sends of this request, 310

310

and then JavaScript moves on in the code right away. 311

311

And so it goes right here to this next line. 312

312

And this, of course, fires off another AJAX call 313

313

immediately, way before the data of Portugal 314

314

has actually arrived. 315

315

So again, we will have two AJAX call 316

316

happening at the same time. 317

317

And so whatever one arrives first, 318

318

will then fire the load event first. 319

319

And so if the first one is to AJAX call for the USA, 320

320

well, then the first element 321

321

that's gonna be printed here will of course, 322

322

be the one from the USA. 323

323

And only after that the data for Portugal arrives. 324

324

And then this callback function here 325

325

is called with the data of Portugal. 326

326

And of course, the same would be true 327

327

no matter how other requests, we would fire off here. 328

328

Let's say Germany here. 329

329

And so now, we actually got the data in the same order. 330

330

But so now it's actually completely different. 331

331

And so this confirms what I just explained before. 332

332

Now, if we actually wanted these requests to be made 333

333

in a specific, like predefined order, 334

334

then we would basically have to chain the requests. 335

335

Which means to make the second request 336

336

only after the first request has finished. 337

337

And that's actually what we're gonna do in the next lecture 338

338

so that I can show you something 339

339

that we developers called callback hell.