260. GETting Data
Jul 21, 2026 05:58
· 2:56
· English
· Whisper Turbo
· 2 स्पीकर
इस हस्तलिपि का समय ख़त्म हो गया. 7 दिन.
स्थायी भंडारण के लिए अद्यतन करें →
सिर्फ दिखाएँ
0:01
S…
Speaker 1 (260. GETting Data)
So requests are sent with the post method and we do
0:05
S…
Speaker 1 (260. GETting Data)
only send them when we subscribe.
0:07
S…
Speaker 1 (260. GETting Data)
Let's ignore the data we get back here for now.
0:10
S…
Speaker 1 (260. GETting Data)
And let's now add another request that actually gets us all
0:14
S…
Speaker 1 (260. GETting Data)
the posts.
0:15
S…
Speaker 2 (260. GETting Data)
And for this,
0:16
S…
Speaker 1 (260. GETting Data)
I'll add a new private property in here,
0:19
S…
Speaker 1 (260. GETting Data)
which I'll name fetchPosts.
0:21
S…
Speaker 2 (260. GETting Data)
And in here,
0:22
S…
Speaker 1 (260. GETting Data)
I want to again use the HTTP client and now the get
0:26
S…
Speaker 1 (260. GETting Data)
method and send a get request.
0:29
S…
Speaker 1 (260. GETting Data)
to that same URL we used for storing the data,
0:31
S…
Speaker 1 (260. GETting Data)
because that is the URL from which we'll be able to get that data.
0:36
S…
Speaker 1 (260. GETting Data)
Now, before we actually go further,
0:38
S…
Speaker 1 (260. GETting Data)
let's have a quick look at Firebase,
0:40
S…
Speaker 1 (260. GETting Data)
and there you should now also see that Posts node here,
0:43
S…
Speaker 1 (260. GETting Data)
and in there you have that cryptic key again,
0:46
S…
Speaker 1 (260. GETting Data)
which is an automatically generated ID by Firebase,
0:49
S…
Speaker 1 (260. GETting Data)
by the way, that's a convenience feature by Firebase.
0:51
S…
Speaker 1 (260. GETting Data)
It generates such IDs for you,
0:53
S…
Speaker 1 (260. GETting Data)
but if you expand this too,
0:55
S…
Speaker 1 (260. GETting Data)
you see your data.
0:56
S…
Speaker 1 (260. GETting Data)
So now the goal is to fetch that data.
0:59
S…
Speaker 1 (260. GETting Data)
We wanna fetch all the posts that were created.
1:02
S…
Speaker 2 (260. GETting Data)
Therefore,
1:03
S…
Speaker 1 (260. GETting Data)
we're preparing this getRequest.
1:05
S…
Speaker 2 (260. GETting Data)
And now,
1:06
S…
Speaker 1 (260. GETting Data)
since this is a getRequest,
1:07
S…
Speaker 1 (260. GETting Data)
this also needs no second argument because getRequests have no request
1:11
S…
Speaker 1 (260. GETting Data)
body because,
1:12
S…
Speaker 1 (260. GETting Data)
well, you're not sending any data.
1:14
S…
Speaker 1 (260. GETting Data)
You're instead just requesting data.
1:17
S…
Speaker 1 (260. GETting Data)
One thing you need to do here too,
1:19
S…
Speaker 1 (260. GETting Data)
however, is you need to subscribe.
1:21
S…
Speaker 1 (260. GETting Data)
No subscription,
1:22
S…
Speaker 1 (260. GETting Data)
no request.
1:23
S…
Speaker 1 (260. GETting Data)
So you need to subscribe here and we should
1:27
S…
Speaker 1 (260. GETting Data)
get back our posts here.
1:28
S…
Speaker 1 (260. GETting Data)
That's the hope.
1:29
S…
Speaker 1 (260. GETting Data)
So we get back our posts here and we can then console
1:33
S…
Speaker 1 (260. GETting Data)
.log posts to get an idea of what we're actually getting back.
1:37
S…
Speaker 1 (260. GETting Data)
Now I put this into that fetch posts method because
1:41
S…
Speaker 1 (260. GETting Data)
we can now call this from two different places.
1:44
S…
Speaker 1 (260. GETting Data)
From in on fetch posts here.
1:48
S…
Speaker 1 (260. GETting Data)
where I now just call this fetchPosts,
1:50
S…
Speaker 1 (260. GETting Data)
but I also want to call this from inside ngOnInit.
1:53
S…
Speaker 1 (260. GETting Data)
So whenever this page loads,
1:55
S…
Speaker 1 (260. GETting Data)
whenever this app loads,
1:56
S…
Speaker 1 (260. GETting Data)
I want to fetchPosts.
1:58
S…
Speaker 1 (260. GETting Data)
And this should therefore call this method and send this request.
2:02
S…
Speaker 1 (260. GETting Data)
Let's save this and this will reload the page and should now already send
2:06
S…
Speaker 1 (260. GETting Data)
such a request.
2:07
S…
Speaker 2 (260. GETting Data)
And indeed,
2:07
S…
Speaker 1 (260. GETting Data)
here is some data we get back.
2:10
S…
Speaker 1 (260. GETting Data)
And it looks like we're getting back a JavaScript object,
2:13
S…
Speaker 1 (260. GETting Data)
which has one key value pair in our case,
2:17
S…
Speaker 1 (260. GETting Data)
where the key is this cryptic key,
2:19
S…
Speaker 1 (260. GETting Data)
this cryptic string.
2:20
S…
Speaker 1 (260. GETting Data)
And the value of that is the original object we stored.
2:23
S…
Speaker 1 (260. GETting Data)
So it's a nested object here.
2:25
S…
Speaker 1 (260. GETting Data)
That is the data we originally sent to the back.
2:28
S…
Speaker 1 (260. GETting Data)
And this is the data we are getting back.
2:31
S…
Speaker 1 (260. GETting Data)
Now, that of course means that if I want to store
2:36
S…
Speaker 1 (260. GETting Data)
all my posts in an array here,
2:38
S…
Speaker 1 (260. GETting Data)
through which we then can loop to output that,
2:41
S…
Speaker 1 (260. GETting Data)
we would need to transform this object
2:45
S…
Speaker 1 (260. GETting Data)
here, because it's a JavaScript object,
2:47
S…
Speaker 1 (260. GETting Data)
to an array.
2:48
S…
Speaker 1 (260. GETting Data)
And we need to transform that data.
2:50
S…
Speaker 1 (260. GETting Data)
Well,
2:51
S…
Speaker 1 (260. GETting Data)
that screams for observable operators.
यह व्याख्या एआई (अंग्रेजी भाषा की पहचान के द्वारा तैयार की गयी थी ।) एआई नीति
सारांश
इस बुक का एआई सारांश बनाने के लिए सार बनाने के लिए सार को क्लिक करें.
साझा कर रहा है...
एआई के बारे में पूछें इस ट्रांसमिशन के बारे में
इस हस्तलिपि के बारे में कुछ सवाल पूछिए — एआई को ज़रूरी भागों और जवाब मिलेगा ।