286. Fetching Recipes

Jul 22, 2026 02:12 · 5:38 · English · Whisper Turbo · 1 Mpitondra teny
Tapitra ao anatin'ny 9 andro. Handefa ny rakitra ho any amin'ny toerana tsy miova →
Fisokajin'ny laha-tahiry
Asehoy fotsiny
0:02
S… Speaker 1 (286. Fetching Recipes)
So we can store data.
0:03
S… Speaker 1 (286. Fetching Recipes)
How about fetching?
0:04
S… Speaker 1 (286. Fetching Recipes)
Because obviously we can delete recipes,
0:07
S… Speaker 1 (286. Fetching Recipes)
right? We can get rid of all of them.
0:09
S… Speaker 1 (286. Fetching Recipes)
And in that case,
0:11
S… Speaker 1 (286. Fetching Recipes)
we got a problem here and we want to be able to fetch data in that case so
0:16
S… Speaker 1 (286. Fetching Recipes)
that we can load all the recipes we have on the server.
0:18
S… Speaker 1 (286. Fetching Recipes)
For loading data,
0:21
S… Speaker 1 (286. Fetching Recipes)
we can again use the data storage service,
0:23
S… Speaker 1 (286. Fetching Recipes)
which makes sense because if we started using that for interacting with
0:28
S… Speaker 1 (286. Fetching Recipes)
the backend, we should definitely stick to it.
0:30
S… Speaker 1 (286. Fetching Recipes)
And there we can now simply add a fetch recipes method,
0:33
S… Speaker 1 (286. Fetching Recipes)
which should be triggered when we click that other button in the header
0:37
S… Speaker 1 (286. Fetching Recipes)
component.
0:37
S… Speaker 1 (286. Fetching Recipes)
So this button,
0:38
S… Speaker 1 (286. Fetching Recipes)
the fetch data button here.
0:39
S… Speaker 1 (286. Fetching Recipes)
Let's already add that click listener and call this on fetch
0:44
S… Speaker 1 (286. Fetching Recipes)
data or whatever you wanna call this method,
0:45
S… Speaker 1 (286. Fetching Recipes)
which gets called.
0:47
S… Speaker 1 (286. Fetching Recipes)
And that method needs to be added to the component body,
0:50
S… Speaker 1 (286. Fetching Recipes)
of course.
0:50
S… Speaker 1 (286. Fetching Recipes)
And then there the goal now is to use the data storage service and
0:54
S… Speaker 1 (286. Fetching Recipes)
call fetch recipes.
0:57
S… Speaker 1 (286. Fetching Recipes)
Now, of course,
0:58
S… Speaker 1 (286. Fetching Recipes)
right now in fetch recipes,
0:59
S… Speaker 1 (286. Fetching Recipes)
we're not doing much.
1:01
S… Speaker 1 (286. Fetching Recipes)
So let's change this by again using the Angular HTTP client
1:05
S… Speaker 1 (286. Fetching Recipes)
and there we can now send a get request.
1:07
S… Speaker 1 (286. Fetching Recipes)
Now,
1:08
S… Speaker 1 (286. Fetching Recipes)
obviously the URL to which we wanna send that request is that same URL
1:12
S… Speaker 1 (286. Fetching Recipes)
we're using up there.
1:14
S… Speaker 1 (286. Fetching Recipes)
So let's add that URL here and let's send a request
1:18
S… Speaker 1 (286. Fetching Recipes)
there to get our recipes.
1:20
S… Speaker 1 (286. Fetching Recipes)
Now, just as before,
1:21
S… Speaker 1 (286. Fetching Recipes)
the question is,
1:22
S… Speaker 1 (286. Fetching Recipes)
where do we want to subscribe?
1:23
S… Speaker 1 (286. Fetching Recipes)
And the answer is,
1:25
S… Speaker 1 (286. Fetching Recipes)
where are we interested in the response?
1:27
S… Speaker 1 (286. Fetching Recipes)
Are we interested in the header component?
1:30
S… Speaker 1 (286. Fetching Recipes)
Well, not really in my opinion.
1:32
S… Speaker 1 (286. Fetching Recipes)
What would we do with the recipes here?
1:33
S… Speaker 1 (286. Fetching Recipes)
We're not using the recipes in the header.
1:35
S… Speaker 1 (286. Fetching Recipes)
So I'm not really caring about the recipes here and hence
1:39
S… Speaker 1 (286. Fetching Recipes)
there is no strong reason to subscribe here.
1:42
S… Speaker 1 (286. Fetching Recipes)
Instead,
1:43
S… Speaker 1 (286. Fetching Recipes)
it would be fine to just subscribe in the data storage service where
1:47
S… Speaker 1 (286. Fetching Recipes)
we already inject the recipes service because maybe we can do something with the recipes
1:51
S… Speaker 1 (286. Fetching Recipes)
service then to
1:53
S… Speaker 1 (286. Fetching Recipes)
push or to move our fetched recipes into that recipes
1:57
S… Speaker 1 (286. Fetching Recipes)
service,
1:58
S… Speaker 1 (286. Fetching Recipes)
which in the end is the place where we do manage our recipes.
2:01
S… Speaker 1 (286. Fetching Recipes)
So let's subscribe here,
2:03
S… Speaker 1 (286. Fetching Recipes)
and we should be getting back our recipes here,
2:07
S… Speaker 1 (286. Fetching Recipes)
though let's first of all console .log this to get an idea of
2:11
S… Speaker 1 (286. Fetching Recipes)
the format of data we get.
2:12
S… Speaker 1 (286. Fetching Recipes)
So we got everything in place,
2:15
S… Speaker 1 (286. Fetching Recipes)
let's save that,
2:16
S… Speaker 1 (286. Fetching Recipes)
go back to our application,
2:18
S… Speaker 1 (286. Fetching Recipes)
and it's reloaded in the meantime,
2:20
S… Speaker 1 (286. Fetching Recipes)
which is why the recipes are back here.
2:22
S… Speaker 1 (286. Fetching Recipes)
Let's click fetch data.
2:24
S… Speaker 1 (286. Fetching Recipes)
That's looking good.
2:26
S… Speaker 1 (286. Fetching Recipes)
We're getting an array.
2:27
S… Speaker 1 (286. Fetching Recipes)
Note the square brackets.
2:28
S… Speaker 1 (286. Fetching Recipes)
We're getting an array of recipes.
2:30
S… Speaker 1 (286. Fetching Recipes)
So since these recipes already have the right format,
2:33
S… Speaker 1 (286. Fetching Recipes)
we should be able to just set our currently loaded recipes
2:37
S… Speaker 1 (286. Fetching Recipes)
equal to these ones to override them with the fetched recipes.
2:41
S… Speaker 1 (286. Fetching Recipes)
And for that,
2:42
S… Speaker 1 (286. Fetching Recipes)
in the recipe service,
2:43
S… Speaker 1 (286. Fetching Recipes)
we now just need a method that allows us to override the existing array
2:47
S… Speaker 1 (286. Fetching Recipes)
of recipes.
2:48
S… Speaker 1 (286. Fetching Recipes)
Because we have that starting array of recipes and we have
2:53
S… Speaker 1 (286. Fetching Recipes)
a function to get the recipes,
2:55
S… Speaker 1 (286. Fetching Recipes)
which means return them from the recipe component from the recipe service to another
2:59
S… Speaker 1 (286. Fetching Recipes)
component.
2:59
S… Speaker 1 (286. Fetching Recipes)
And then we have the same for a single recipe and so on,
3:02
S… Speaker 1 (286. Fetching Recipes)
but we have no method to override that array of recipes here.
3:06
S… Speaker 1 (286. Fetching Recipes)
And it's time to do so now.
3:08
S… Speaker 1 (286. Fetching Recipes)
So let's add a new method in the recipe service,
3:11
S… Speaker 1 (286. Fetching Recipes)
which we can call setRecipes.
3:13
S… Speaker 1 (286. Fetching Recipes)
And there we should get an array
3:17
S… Speaker 1 (286. Fetching Recipes)
of recipes.
3:18
S… Speaker 1 (286. Fetching Recipes)
So let's make it really clear by adding that type.
3:21
S… Speaker 1 (286. Fetching Recipes)
And the idea here is simple.
3:22
S… Speaker 1 (286. Fetching Recipes)
This recipes should be set equal to the recipes
3:26
S… Speaker 1 (286. Fetching Recipes)
we're getting as an argument here.
3:28
S… Speaker 1 (286. Fetching Recipes)
And this will override our recipes here with,
3:32
S… Speaker 1 (286. Fetching Recipes)
well, these recipes.
3:33
S… Speaker 1 (286. Fetching Recipes)
The important thing here just is,
3:35
S… Speaker 1 (286. Fetching Recipes)
since we're changing the recipes,
3:37
S… Speaker 1 (286. Fetching Recipes)
we should then also call this recipes changed next
3:42
S… Speaker 1 (286. Fetching Recipes)
and push.
3:44
S… Speaker 1 (286. Fetching Recipes)
a copy with the slice method of our recipes there so that
3:48
S… Speaker 1 (286. Fetching Recipes)
we inform all interested places in our app that we got new recipes,
3:52
S… Speaker 1 (286. Fetching Recipes)
just as we're doing it when we're updating a recipe or deleting a recipe.
3:56
S… Speaker 1 (286. Fetching Recipes)
So with that,
3:58
S… Speaker 1 (286. Fetching Recipes)
we're setting the recipes equal.
4:00
S… Speaker 1 (286. Fetching Recipes)
Now in the data storage service,
4:02
S… Speaker 1 (286. Fetching Recipes)
instead of logging the recipes,
4:04
S… Speaker 1 (286. Fetching Recipes)
we can use the injected recipe service and call set recipes
4:09
S… Speaker 1 (286. Fetching Recipes)
to forward our recipes there.
4:13
S… Speaker 1 (286. Fetching Recipes)
Now we're getting an error here because TypeScript does not understand
4:17
S… Speaker 1 (286. Fetching Recipes)
that the recipes we're getting here really are an array of recipes and
4:21
S… Speaker 1 (286. Fetching Recipes)
that makes sense.
4:22
S… Speaker 1 (286. Fetching Recipes)
It just understands that here we have the body of an
4:26
S… Speaker 1 (286. Fetching Recipes)
HTTP response and that could be anything.
4:29
S… Speaker 1 (286. Fetching Recipes)
And therefore to inform TypeScript about the type,
4:32
S… Speaker 1 (286. Fetching Recipes)
we should indeed add the generic annotation to
4:37
S… Speaker 1 (286. Fetching Recipes)
the get method here where we can make clear which format our extracted
4:41
S… Speaker 1 (286. Fetching Recipes)
response body will have.
4:42
S… Speaker 1 (286. Fetching Recipes)
And therefore here I will add a recipe array and that
4:46
S… Speaker 1 (286. Fetching Recipes)
now requires me or requires us if you're following along to
4:51
S… Speaker 1 (286. Fetching Recipes)
import the recipe model here from the recipes area.
4:56
S… Speaker 1 (286. Fetching Recipes)
so that we can use that type in the data storage service.
4:59
S… Speaker 1 (286. Fetching Recipes)
And now TypeScript does not complain anymore because now TypeScript understands
5:03
S… Speaker 1 (286. Fetching Recipes)
that the response body will indeed be an array of recipes and
5:07
S… Speaker 1 (286. Fetching Recipes)
therefore we can validly forward this here.
5:09
S… Speaker 1 (286. Fetching Recipes)
With that out of the way,
5:12
S… Speaker 1 (286. Fetching Recipes)
let's give this a try.
5:15
S… Speaker 1 (286. Fetching Recipes)
Let's first of all delete all these recipes here and
5:20
S… Speaker 1 (286. Fetching Recipes)
let's now fetch them.
5:22
S… Speaker 1 (286. Fetching Recipes)
And that's looking good.
5:23
S… Speaker 1 (286. Fetching Recipes)
Here they are again.
5:24
S… Speaker 1 (286. Fetching Recipes)
And if we send this to the shopping list,
5:27
S… Speaker 1 (286. Fetching Recipes)
for example,
5:27
S… Speaker 1 (286. Fetching Recipes)
that all seems to work.
5:29
S… Speaker 1 (286. Fetching Recipes)
So we can now manage our recipes and now we are
5:33
S… Speaker 1 (286. Fetching Recipes)
indeed storing them on a server.

IA (fifandraisana amin'ny feo) no namorona ity dika mitovin'ny soratra ity. Mety misy tsy fetezana - jereo ny feo voalohany raha mila ampiasaina amin'ny fomba henjana. Politikan'ny AI

Tianao ve ny STT.ai? Lazao amin'ny namanao!
Famintinana
Tsindrio ny Famaritana mba hamoronana famintinana AI an'ity dika mitovy ity.
Famintinana...
Manontany ny AI momba ity dika mitovy ity
Manontany zavatra momba ity dika mitovy ity — hahita ny ampahany mifandraika amin'izany ny AI ary hamaly.
Adikao ny hafa