287. Transforming Response Data

Jul 22, 2026 02:13 · 4:17 · English · Whisper Turbo · 2 Altaveus
Aquesta transcripció expirarà 9 dies. Actualització per a l' emmagatzematge permanent →
Índex de la lliçó
Només mostrar
0:02
S… Speaker 1 (287. Transforming Response Data)
We're almost done,
0:03
S… Speaker 1 (287. Transforming Response Data)
but there is some cleanup work we can do related to that.
0:06
S… Speaker 1 (287. Transforming Response Data)
It's nice that we can now load and store our recipes.
0:09
S… Speaker 1 (287. Transforming Response Data)
That first of all means that we no longer need our default recipes
0:13
S… Speaker 1 (287. Transforming Response Data)
here though.
0:13
S… Speaker 1 (287. Transforming Response Data)
So I will comment that out just to have it around in case we do
0:18
S… Speaker 1 (287. Transforming Response Data)
need it again or we want that dummy data again.
0:20
S… Speaker 1 (287. Transforming Response Data)
But I will initialize the recipes property,
0:23
S… Speaker 1 (287. Transforming Response Data)
which is an array of recipes just as before,
0:25
S… Speaker 1 (287. Transforming Response Data)
as an empty array now.
0:27
S… Speaker 1 (287. Transforming Response Data)
so that when our app loads,
0:28
S… Speaker 1 (287. Transforming Response Data)
we have no recipes and we need to load them.
0:30
S… Speaker 1 (287. Transforming Response Data)
That of course is optional,
0:31
S… Speaker 1 (287. Transforming Response Data)
but I guess it makes a bit more sense than loading some dummy data.
0:34
S… Speaker 1 (287. Transforming Response Data)
Obviously you could do the same in the shopping list area.
0:37
S… Speaker 2 (287. Transforming Response Data)
Now that's the first change.
0:39
S… Speaker 1 (287. Transforming Response Data)
And we also have a bug in this application,
0:42
S… Speaker 1 (287. Transforming Response Data)
which we should fix.
0:43
S… Speaker 1 (287. Transforming Response Data)
Let's say we add a new recipe here,
0:47
S… Speaker 2 (287. Transforming Response Data)
summer salad.
0:49
S… Speaker 2 (287. Transforming Response Data)
Let's add this image here.
0:53
S… Speaker 1 (287. Transforming Response Data)
juicy summer salad.
0:55
S… Speaker 2 (287. Transforming Response Data)
And now the important thing,
0:56
S… Speaker 1 (287. Transforming Response Data)
I won't add any ingredients to that recipe.
0:59
S… Speaker 1 (287. Transforming Response Data)
Instead, let's save it like this,
1:00
S… Speaker 1 (287. Transforming Response Data)
which is valid.
1:01
S… Speaker 1 (287. Transforming Response Data)
We don't need to have recipes.
1:02
S… Speaker 1 (287. Transforming Response Data)
We don't need to have ingredients.
1:05
S… Speaker 1 (287. Transforming Response Data)
And now let me store that.
1:08
S… Speaker 1 (287. Transforming Response Data)
So let's click save data.
1:09
S… Speaker 1 (287. Transforming Response Data)
And on Firebase,
1:10
S… Speaker 1 (287. Transforming Response Data)
you can see there is a new item and that's our summer salad.
1:14
S… Speaker 1 (287. Transforming Response Data)
But please note,
1:15
S… Speaker 1 (287. Transforming Response Data)
obviously it has no ingredients.
1:17
S… Speaker 2 (287. Transforming Response Data)
Now,
1:19
S… Speaker 1 (287. Transforming Response Data)
Generally, our app works here,
1:21
S… Speaker 1 (287. Transforming Response Data)
but to prevent nasty bugs,
1:23
S… Speaker 1 (287. Transforming Response Data)
when we're fetching the recipes,
1:25
S… Speaker 1 (287. Transforming Response Data)
it would make sense that we make sure that we always
1:29
S… Speaker 1 (287. Transforming Response Data)
have ingredients,
1:30
S… Speaker 1 (287. Transforming Response Data)
even if it's just an empty array,
1:31
S… Speaker 1 (287. Transforming Response Data)
but that the data we loaded in the end has some ingredients and this property
1:36
S… Speaker 1 (287. Transforming Response Data)
is not undefined.
1:37
S… Speaker 1 (287. Transforming Response Data)
Because if we otherwise try to directly interact with the ingredients,
1:41
S… Speaker 1 (287. Transforming Response Data)
we could get errors.
1:43
S… Speaker 2 (287. Transforming Response Data)
And for that,
1:44
S… Speaker 1 (287. Transforming Response Data)
we can simply add pipe here to our fetch recipes HTTP
1:48
S… Speaker 1 (287. Transforming Response Data)
request and add the map operator,
1:51
S… Speaker 1 (287. Transforming Response Data)
which allows us to transform that data.
1:54
S… Speaker 2 (287. Transforming Response Data)
For that,
1:56
S… Speaker 1 (287. Transforming Response Data)
we just need to import map from
2:00
S… Speaker 1 (287. Transforming Response Data)
RxJS operators.
2:03
S… Speaker 2 (287. Transforming Response Data)
And this,
2:04
S… Speaker 1 (287. Transforming Response Data)
as you learned,
2:05
S… Speaker 1 (287. Transforming Response Data)
is an observable operator that allows you to transform the data in
2:09
S… Speaker 1 (287. Transforming Response Data)
an observable chain.
2:10
S… Speaker 1 (287. Transforming Response Data)
So right before subscribe.
2:11
S… Speaker 1 (287. Transforming Response Data)
Here we get our recipes,
2:14
S… Speaker 1 (287. Transforming Response Data)
but the recipes that might not have an ingredients property.
2:17
S… Speaker 1 (287. Transforming Response Data)
And now here we can simply return recipes,
2:21
S… Speaker 1 (287. Transforming Response Data)
but call map on these two.
2:23
S… Speaker 1 (287. Transforming Response Data)
And now this can be confusing.
2:24
S… Speaker 1 (287. Transforming Response Data)
Map here in pipe is an RxJS
2:28
S… Speaker 1 (287. Transforming Response Data)
operator.
2:29
S… Speaker 1 (287. Transforming Response Data)
Map here.
2:31
S… Speaker 1 (287. Transforming Response Data)
is called on an array and therefore the normal JavaScript array method
2:35
S… Speaker 1 (287. Transforming Response Data)
map. They happen to have the same name,
2:37
S… Speaker 1 (287. Transforming Response Data)
but they are not the same function.
2:38
S… Speaker 1 (287. Transforming Response Data)
That's an RxJS operator called as a function like this inside of
2:42
S… Speaker 1 (287. Transforming Response Data)
pipe. That is a JavaScript array method.
2:45
S… Speaker 1 (287. Transforming Response Data)
Now map simply allows us to transform the elements in an
2:49
S… Speaker 1 (287. Transforming Response Data)
array. In this case,
2:50
S… Speaker 1 (287. Transforming Response Data)
in the recipes array.
2:51
S… Speaker 2 (287. Transforming Response Data)
It takes an anonymous function,
2:52
S… Speaker 1 (287. Transforming Response Data)
which is executed for every element in that array.
2:55
S… Speaker 1 (287. Transforming Response Data)
So therefore for every recipe.
2:57
S… Speaker 1 (287. Transforming Response Data)
And we return the transformed recipe.
3:00
S… Speaker 1 (287. Transforming Response Data)
Now here my idea is to return the original recipe,
3:02
S… Speaker 1 (287. Transforming Response Data)
but if that recipe doesn't have an ingredients array,
3:06
S… Speaker 1 (287. Transforming Response Data)
to set ingredients to an empty array instead.
3:10
S… Speaker 2 (287. Transforming Response Data)
And for this,
3:12
S… Speaker 1 (287. Transforming Response Data)
I will return a new object.
3:14
S… Speaker 1 (287. Transforming Response Data)
where I use the spread operator to copy all the properties of recipe to
3:18
S… Speaker 1 (287. Transforming Response Data)
copy all the existing data.
3:19
S… Speaker 1 (287. Transforming Response Data)
And then ingredients will be set equal to,
3:23
S… Speaker 1 (287. Transforming Response Data)
and now I'll add a ternary expression where I simply check whether recipe
3:27
S… Speaker 1 (287. Transforming Response Data)
ingredients is true -ish,
3:29
S… Speaker 1 (287. Transforming Response Data)
which it is if it is an array with zero or more elements.
3:32
S… Speaker 2 (287. Transforming Response Data)
And if that is the case,
3:34
S… Speaker 1 (287. Transforming Response Data)
then I will set ingredients equal to recipe ingredients,
3:36
S… Speaker 1 (287. Transforming Response Data)
which means I will not change it.
3:38
S… Speaker 1 (287. Transforming Response Data)
But otherwise,
3:39
S… Speaker 1 (287. Transforming Response Data)
I'll set it to an empty array.
3:40
S… Speaker 1 (287. Transforming Response Data)
So if this here is kind of false,
3:42
S… Speaker 1 (287. Transforming Response Data)
which is
3:42
S… Speaker 1 (287. Transforming Response Data)
the case if ingredients is undefined,
3:44
S… Speaker 1 (287. Transforming Response Data)
if it's not set,
3:45
S… Speaker 1 (287. Transforming Response Data)
then I will set it to an empty array instead.
3:48
S… Speaker 1 (287. Transforming Response Data)
And that's just a tiny improvement here in this observable chain,
3:52
S… Speaker 1 (287. Transforming Response Data)
which doesn't break our app,
3:54
S… Speaker 1 (287. Transforming Response Data)
of course it shouldn't.
3:55
S… Speaker 1 (287. Transforming Response Data)
We can still edit our recipe here,
3:58
S… Speaker 1 (287. Transforming Response Data)
interact with it,
3:59
S… Speaker 1 (287. Transforming Response Data)
save that and everything works as before.
4:03
S… Speaker 1 (287. Transforming Response Data)
But now we have a little bit more protection against unexpected errors
4:07
S… Speaker 1 (287. Transforming Response Data)
because now we ensure that the ingredients property of the loaded recipes
4:11
S… Speaker 1 (287. Transforming Response Data)
is always set to at least an empty array.

Aquesta transcripció ha estat generada per reconeixement de veu IA (recloctor automàtic). Pot contenir errors PROXY verificar contra l' àudio original per a ús crític. Política de IA

❤️ T'agrada STT.ai? Explica-ho als teus amics!
Resum
Cliqueu Summarize per generar un resum de la IA d' aquesta transcripció.
Summaring...
Pregunta a la IA sobre aquest entorn
Pregunta tot el que sigui d'aquesta transcripció, la IA cercarà seccions i respostes rellevants.
Transcriu un altre