286. Fetching Recipes

Jul 22, 2026 02:12 · 5:38 · English · Whisper Turbo · 1 ஒலிப்பேழைகள்

இந்த நகல் காலாவதியாகும் 9 நாட்கள். நிலையான சேமிப்புக்காக மேம்படுத்தல் →

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.

இந்த ஒலிப்பதிவு AI (தானியங்கி பேச்சு அடையாளம்) மூலம் உருவாக்கப்பட்டது. பிழைகள் இருக்கலாம் - முக்கியமான பயன்பாட்டுக்கு மூல ஒலியை சரிபார்க்கவும். AI கொள்கை

❤️ STT.ai ஐ நேசிக்கிறீர்களா? உங்கள் நண்பர்களுக்குச் சொல்லுங்கள்!

சுருக்கம்

இந்த நகலெடுப்புக்கான AI சுருக்கத்தை உருவாக்க சுருக்கம் என்பதை க்ளிக் செய்யவும்.

இந்த நகலை AI க்குக் கேட்கவும்

இந்த நூலைப் பற்றி ஏதாவது கேட்கவும் - AI தொடர்புடைய பகுதிகளைக் கண்டுபிடித்து பதிலளிக்கும்.

மற்றொன்றை மாற்று