261. Using RxJS Operators to Transform Response Data

Jul 21, 2026 06:00 · 3:59 · English · Whisper Turbo · 2 Talare

Den här utskriften går ut i 7 dagar. Uppgradering för permanent lagring →

Föreläsningsindex

0:02

S… Speaker 1 (261. Using RxJS Operators to Transform Response Data)

Transforming data is of course something we could also do here inside

0:06

S… Speaker 1 (261. Using RxJS Operators to Transform Response Data)

of subscribe and that would generally not be a problem.

0:09

S… Speaker 1 (261. Using RxJS Operators to Transform Response Data)

But it is a good practice to use observable operators because

0:13

S… Speaker 1 (261. Using RxJS Operators to Transform Response Data)

it simply allows us to write cleaner code with different steps we funnel

0:17

S… Speaker 1 (261. Using RxJS Operators to Transform Response Data)

our data through that can easily be swapped or adjusted so that you

0:21

S… Speaker 1 (261. Using RxJS Operators to Transform Response Data)

have a lean subscribe function here and have other steps that focus

0:25

S… Speaker 1 (261. Using RxJS Operators to Transform Response Data)

on other parts.

0:27

S… Speaker 2 (261. Using RxJS Operators to Transform Response Data)

Therefore,

0:28

S… Speaker 1 (261. Using RxJS Operators to Transform Response Data)

here before we subscribe,

0:29

S… Speaker 1 (261. Using RxJS Operators to Transform Response Data)

we can now call pipe because pipe as you learned is a method that

0:33

S… Speaker 1 (261. Using RxJS Operators to Transform Response Data)

allows you to funnel your observable data through

0:37

S… Speaker 1 (261. Using RxJS Operators to Transform Response Data)

multiple operators before they reach the subscribe method.

0:41

S… Speaker 1 (261. Using RxJS Operators to Transform Response Data)

Now the operator I need here is the map operator and

0:45

S… Speaker 1 (261. Using RxJS Operators to Transform Response Data)

therefore I will import map

0:48

S… Speaker 1 (261. Using RxJS Operators to Transform Response Data)

from rx .js slash operators.

0:51

S… Speaker 1 (261. Using RxJS Operators to Transform Response Data)

The map operator allows us to get some data and

0:55

S… Speaker 1 (261. Using RxJS Operators to Transform Response Data)

return new data,

0:56

S… Speaker 1 (261. Using RxJS Operators to Transform Response Data)

which is then automatically rewrapped into an observable so that we can

1:00

S… Speaker 1 (261. Using RxJS Operators to Transform Response Data)

still subscribe to it.

1:01

S… Speaker 1 (261. Using RxJS Operators to Transform Response Data)

If it would not be wrapped into an observable again,

1:04

S… Speaker 1 (261. Using RxJS Operators to Transform Response Data)

we could not subscribe.

1:06

S… Speaker 1 (261. Using RxJS Operators to Transform Response Data)

So let's map here,

1:07

S… Speaker 1 (261. Using RxJS Operators to Transform Response Data)

let's add map as an argument to pipe and map is a function which

1:11

S… Speaker 1 (261. Using RxJS Operators to Transform Response Data)

we call and that function now again takes another function as an input,

1:15

S… Speaker 1 (261. Using RxJS Operators to Transform Response Data)

a function which will get our response data and that

1:19

S… Speaker 1 (261. Using RxJS Operators to Transform Response Data)

should now return the converted response data.

1:22

S… Speaker 1 (261. Using RxJS Operators to Transform Response Data)

And here the idea is that we return an array of posts

1:26

S… Speaker 1 (261. Using RxJS Operators to Transform Response Data)

instead of an object with that cryptic key,

1:28

S… Speaker 1 (261. Using RxJS Operators to Transform Response Data)

which then holds our actual post.

1:30

S… Speaker 1 (261. Using RxJS Operators to Transform Response Data)

Now to convert a JavaScript object,

1:33

S… Speaker 1 (261. Using RxJS Operators to Transform Response Data)

which we have here to an array,

1:36

S… Speaker 1 (261. Using RxJS Operators to Transform Response Data)

we have to manually loop through

1:40

S… Speaker 1 (261. Using RxJS Operators to Transform Response Data)

all the keys and create a new array.

1:43

S… Speaker 1 (261. Using RxJS Operators to Transform Response Data)

So here I'll create a new post array constant,

1:46

S… Speaker 1 (261. Using RxJS Operators to Transform Response Data)

which is empty initially.

1:47

S… Speaker 1 (261. Using RxJS Operators to Transform Response Data)

And then I'll use a for in loop to go through all my

1:51

S… Speaker 1 (261. Using RxJS Operators to Transform Response Data)

keys in response data,

1:55

S… Speaker 1 (261. Using RxJS Operators to Transform Response Data)

which I know will be an object.

1:57

S… Speaker 1 (261. Using RxJS Operators to Transform Response Data)

And then I want to push each piece of data

2:01

S… Speaker 1 (261. Using RxJS Operators to Transform Response Data)

into my post array.

2:02

S… Speaker 1 (261. Using RxJS Operators to Transform Response Data)

So here I will then use posts array and push

2:07

S… Speaker 1 (261. Using RxJS Operators to Transform Response Data)

response data key.

2:10

S… Speaker 1 (261. Using RxJS Operators to Transform Response Data)

So I'm accessing the key we're currently looking at in response data and

2:14

S… Speaker 1 (261. Using RxJS Operators to Transform Response Data)

therefore I'm accessing the nested JavaScript object and

2:18

S… Speaker 1 (261. Using RxJS Operators to Transform Response Data)

then pushing that nested JavaScript object into my posts

2:24

S… Speaker 1 (261. Using RxJS Operators to Transform Response Data)

array.

2:26

S… Speaker 1 (261. Using RxJS Operators to Transform Response Data)

However, I don't just want to push that object like this in there.

2:30

S… Speaker 2 (261. Using RxJS Operators to Transform Response Data)

Instead,

2:30

S… Speaker 1 (261. Using RxJS Operators to Transform Response Data)

I want to push a new object in there.

2:33

S… Speaker 1 (261. Using RxJS Operators to Transform Response Data)

So let me add curly braces.

2:34

S… Speaker 1 (261. Using RxJS Operators to Transform Response Data)

And let's use the spread operator now.

2:36

S… Speaker 1 (261. Using RxJS Operators to Transform Response Data)

This will pull out all the key value pairs of that nested

2:41

S… Speaker 1 (261. Using RxJS Operators to Transform Response Data)

object we're accessing here.

2:42

S… Speaker 1 (261. Using RxJS Operators to Transform Response Data)

And let's close this with curly braces too.

2:44

S… Speaker 1 (261. Using RxJS Operators to Transform Response Data)

Because this now allows me to also add one new

2:48

S… Speaker 1 (261. Using RxJS Operators to Transform Response Data)

key value pair to that object we're adding to posts array and

2:52

S… Speaker 1 (261. Using RxJS Operators to Transform Response Data)

that should be an ID field which actually stores the key because that

2:56

S… Speaker 1 (261. Using RxJS Operators to Transform Response Data)

key here, that cryptic string is a perfect ID and it is a unique ID

3:01

S… Speaker 1 (261. Using RxJS Operators to Transform Response Data)

generated by Firebase.

3:02

S… Speaker 2 (261. Using RxJS Operators to Transform Response Data)

Therefore,

3:03

S… Speaker 1 (261. Using RxJS Operators to Transform Response Data)

of course, I want to keep that so that we have this,

3:06

S… Speaker 1 (261. Using RxJS Operators to Transform Response Data)

for example,

3:07

S… Speaker 1 (261. Using RxJS Operators to Transform Response Data)

if we wanted to delete a single post or anything like that.

3:11

S… Speaker 1 (261. Using RxJS Operators to Transform Response Data)

So now we're pushing this new object into our posts array here.

3:15

S… Speaker 1 (261. Using RxJS Operators to Transform Response Data)

Now it is a good practice to wrap this with a if statement if you're using

3:19

S… Speaker 1 (261. Using RxJS Operators to Transform Response Data)

a for in loop where you check if response data has

3:23

S… Speaker 1 (261. Using RxJS Operators to Transform Response Data)

key as its own property so that you're not trying to

3:27

S… Speaker 1 (261. Using RxJS Operators to Transform Response Data)

access the property of some prototype.

3:30

S… Speaker 2 (261. Using RxJS Operators to Transform Response Data)

And with that,

3:31

S… Speaker 1 (261. Using RxJS Operators to Transform Response Data)

posts here now really is an array of posts.

3:34

S… Speaker 1 (261. Using RxJS Operators to Transform Response Data)

And now we only need to make sure that we return posts array here

3:38

S… Speaker 1 (261. Using RxJS Operators to Transform Response Data)

in map so that this is now forwarded to our subscribe

3:42

S… Speaker 1 (261. Using RxJS Operators to Transform Response Data)

function.

3:43

S… Speaker 2 (261. Using RxJS Operators to Transform Response Data)

With that,

3:44

S… Speaker 1 (261. Using RxJS Operators to Transform Response Data)

if that now reloads,

3:45

S… Speaker 1 (261. Using RxJS Operators to Transform Response Data)

indeed here we see we have an array,

3:46

S… Speaker 1 (261. Using RxJS Operators to Transform Response Data)

we have square brackets,

3:47

S… Speaker 1 (261. Using RxJS Operators to Transform Response Data)

and in there we have an element which has a content,

3:50

S… Speaker 1 (261. Using RxJS Operators to Transform Response Data)

the ID we added and the title.

3:52

S… Speaker 1 (261. Using RxJS Operators to Transform Response Data)

And this is how we use observable operators to transform our

3:56

S… Speaker 1 (261. Using RxJS Operators to Transform Response Data)

data.

Denna utskrift genererades av AI (automatisk taligenkänning). Kan innehålla fel — verifiera mot originalljudet för kritisk användning. Politik för AI

❤️ Älskar du STT.ai? Berätta för dina vänner!

Sammanfattning

Klicka på Summarize för att generera en AI sammanfattning av denna utskrift.

Fråga AI om detta Transcript

Fråga något om denna utskrift — AI kommer att hitta relevanta avsnitt och svar.

Skriv om en annan