287. Transforming Response Data

Jul 22, 2026 02:13 · 4:17 · English · Whisper Turbo · 2 Oradores
Esta transcripción expira en 9 días. Actualizar para el almacenamiento permanente →
Índice de conferencias
Mostrar sólo
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.

Esta transcripción fue generada por AI (reconocimiento automático del habla). Puede contener errores — verificar contra el audio original para uso crítico. Política de IA

❤️ ¿Te encanta STT.ai? ¡Cuéntale a tus amigos!
Resumen
Haga clic en Resumen para generar un resumen de IA de esta transcripción.
Resumiendo...
Pregúntele a AI acerca de esta transcripción
Pregunte cualquier cosa acerca de esta transcripción: la IA encontrará secciones relevantes y responderá.
Transcribir otro