Svelte Fetching API Data

[00:00:00]
>> So we're gonna import on mount from console. And then inside on mount. We're gonna load a load of celebrities and we're gonna assign the value of the celebrities to, in fact, no we're not. We're gonna create a promise that represents the result of that asynchronous call. Let's call it celebs promise.

[00:00:37] Like that. This will make more sense in a moment, side here, we're gonna do celebs promise equals load celebs. Then we just need to implement the load celebs function. There's gonna be an asynchronous function. That's gonna fetch some data from. The cameo explorer that we were looking at earlier.

[00:01:17] So specifically, this file is the one that we want. And we'll just desalinize that as Jason, and then log it out. So now you can see that as soon as the application starts and that unmount function runs, we load the celebrities and we get this list of 2,629 different cameo celebs, including Dennis Rodman, Bangman Brandon and various others.

[00:02:00] We're not gonna use all 2,600 of them though because some of them are, frankly not people that anyone is gonna have heard of. So, we're gonna use a simple heuristic to subset that list and only include the ones that we care about. And that is how many reviews they've had.

[00:02:17] So you can look at. Each of this and see the bangbangbrandon? Despite being the most expensive of all of the celebrities, in this set, he set his price at $999. Has anyone reviewed? So he's probably not as big a deal as Dennis Rodman, who has the comparatively cheap price of $600 for a 30 second video.

[00:02:41] But has 24 reviews but a lot of them have even more reviews. Let's see, James Murray down here. Who I think is the guy from impractical jokers. Maybe yeah, this guy, okay, so he has a lot of reviews so he is probably using cameo quite a lot and making a nice little side income off of that.

[00:03:17] And we're gonna set a threshold if someone has had 50 or more reviews then we consider them worth including in a quiz because it's no fun if you go through the quiz and you don't have anyone in it. We're also gonna need to create a lookup of these maps from a celebrity ID to a celebrity object.

[00:03:37] For reasons that will become clear later on. So I'm gonna create a new map. And then we're gonna populate that look up, like so, lookup.setc.id. See, then you can see what that, looks like. It's a map of Id object. And then we're gonna create a subset of the celebrities that we care about.

[00:04:17] It's gonna loop over that list. And if. A celebrity has more than or equal to 50 reviews. Then we're gonna add them to the set. And if that's celebrity has anyone that they're similar to then we're gonna give those people a pass on the threshold. We're gonna include those as well, just cuz it makes the quiz more interesting.

[00:04:57] And we can use the lookup that we just generated to find those people. Then we're gonna return both the subsetted list, which is gonna be an array like so. Array dot from subset. And the locker [SOUND] Okay, so that is the function that's gonna get the external data and process it for the needs of our application.

[00:05:32] So, all the remains is to switch over to the playing state once that data has loaded, so we're gonna make this start handler a sync function now, because then we can do this. Get that data from the promise now we need to figure out which of these celebrities are gonna be included in our quiz.

[00:06:01] So we're gonna make a selection. Create that selection state. And then we're gonna use the The select function is already included in the start repo. We're not gonna bother implementing this during the workshop, but you can take a look and see how it's working. It's taking the list and the lookup.

[00:06:27] It's filtering them on category. And then for as many rounds as there are, it's taking a celebrity at random, removing them from the eraser and they can't be picked again. And then, randomly if they have similar celebrities, and plays a three and four chance that it will pick one of them, otherwise it will just pick any random celebrity.

[00:06:53] Put that into our selection array, make sure that they don't get picked again later, and then it will return that. So, we're gonna import that select function from select.js. [BLANK AUDIO] And we're gonna filter it on the slug of the category that was selected. So that's gonna look like this the.detail.category.slug and then we just need to go to state equals playing and so now, hang on a minute.

[00:07:56] What we got here lookup is not a function. So it's telling us that on line 33 of app.spelt we've got a mistake is where it says subset.add lookup, parentheses ID, that should be lookup.get because lookup is a map. So, replace that and no more console errors. So now if everything has worked correctly when we select one of these categories, it's gonna take us to the game screen, which we haven't yet implemented.

[00:08:24] So that is checkpoint one that is the first step of building this application. And the next step, we're gonna start building the actual game play.