263. Outputting Posts

Jul 21, 2026 06:04 · 2:15 · English · Whisper Turbo · 2 Zvočniki

Ta prepis se izteče. 7 dni. Nadgradnja za trajno shranjevanje →

Indeks predavanja

0:01

S… Speaker 1 (263. Outputting Posts)

Let's now output our data now that we're fetching it.

0:04

S… Speaker 2 (263. Outputting Posts)

For that,

0:05

S… Speaker 1 (263. Outputting Posts)

when we're getting the data,

0:06

S… Speaker 1 (263. Outputting Posts)

instead of logging it,

0:07

S… Speaker 1 (263. Outputting Posts)

since we now transformed this into an array of posts,

0:10

S… Speaker 1 (263. Outputting Posts)

we can set this loadedPost,

0:12

S… Speaker 1 (263. Outputting Posts)

which is our property I created earlier,

0:15

S… Speaker 1 (263. Outputting Posts)

where we now also can be more explicit about the type it will store,

0:18

S… Speaker 1 (263. Outputting Posts)

because that will be an array of posts,

0:20

S… Speaker 1 (263. Outputting Posts)

of course.

0:20

S… Speaker 1 (263. Outputting Posts)

We can set this loadedPost here equal to

0:24

S… Speaker 1 (263. Outputting Posts)

the posts we fetched.

0:27

S… Speaker 1 (263. Outputting Posts)

Now we just have to use loaded posts in our template.

0:30

S… Speaker 2 (263. Outputting Posts)

And for that,

0:31

S… Speaker 1 (263. Outputting Posts)

of course, in this area where I say no posts available,

0:34

S… Speaker 1 (263. Outputting Posts)

I only want to say that if we really have no posts.

0:38

S… Speaker 1 (263. Outputting Posts)

So I'll add ngif here and check if loaded

0:42

S… Speaker 1 (263. Outputting Posts)

posts length is smaller than one,

0:46

S… Speaker 1 (263. Outputting Posts)

which means we have no posts.

0:47

S… Speaker 2 (263. Outputting Posts)

If it is longer than one,

0:49

S… Speaker 1 (263. Outputting Posts)

then I want to output an unordered list with a class of list group,

0:53

S… Speaker 2 (263. Outputting Posts)

which is a bootstrap class.

0:55

S… Speaker 1 (263. Outputting Posts)

which has list items with list group item as

1:00

S… Speaker 1 (263. Outputting Posts)

a class.

1:00

S… Speaker 1 (263. Outputting Posts)

And in there we'll have a h1 tag for the title and

1:04

S… Speaker 1 (263. Outputting Posts)

a paragraph for the content of the post.

1:06

S… Speaker 1 (263. Outputting Posts)

Now I want to only show this of course and

1:10

S… Speaker 1 (263. Outputting Posts)

hence I'll add ngif on the unordered list if loaded post's length is

1:15

S… Speaker 1 (263. Outputting Posts)

greater or equal than one.

1:16

S… Speaker 1 (263. Outputting Posts)

So it's the opposite of this condition here.

1:20

S… Speaker 2 (263. Outputting Posts)

If that's true,

1:21

S… Speaker 2 (263. Outputting Posts)

we'll show that list.

1:22

S… Speaker 1 (263. Outputting Posts)

And now I want to loop through all the loaded posts and recreate a list item

1:26

S… Speaker 1 (263. Outputting Posts)

for every loaded post.

1:28

S… Speaker 1 (263. Outputting Posts)

So here I'll add ng4 to go through all my posts.

1:32

S… Speaker 1 (263. Outputting Posts)

So I'll name this post of loaded posts.

1:35

S… Speaker 1 (263. Outputting Posts)

And then here we can output post title

1:39

S… Speaker 1 (263. Outputting Posts)

and for the paragraph,

1:42

S… Speaker 1 (263. Outputting Posts)

we can output post content.

1:48

S… Speaker 2 (263. Outputting Posts)

Let's have a look at whether this works.

1:49

S… Speaker 1 (263. Outputting Posts)

If this now reloads,

1:51

S… Speaker 1 (263. Outputting Posts)

it fetches the posts and you see there after these posts appear here.

1:54

S… Speaker 1 (263. Outputting Posts)

Now maybe the heading is a bit big.

1:56

S… Speaker 1 (263. Outputting Posts)

Let's maybe use H3 here.

1:59

S… Speaker 1 (263. Outputting Posts)

But the important takeaway is that our data loads,

2:02

S… Speaker 1 (263. Outputting Posts)

of course.

2:03

S… Speaker 1 (263. Outputting Posts)

Now that is super awesome.

2:05

S… Speaker 1 (263. Outputting Posts)

And this shows us how we can make the step from loading

2:09

S… Speaker 1 (263. Outputting Posts)

the data to outputting it in our frontend.

Ta prepis je ustvaril AI (avtomatsko prepoznavanje govora). Lahko vsebuje napake – preverite proti originalnemu zvoku za kritično uporabo. Politika AI

❤️ Ljubezen STT.ai?

Povzetek

Kliknite Povzetek, da ustvarite povzetek AI tega transkripta.

Vprašaj AI o tem transkriptu

Vprašajte karkoli o tem prepisu – AI bo našel ustrezne oddelke in odgovor.

Transcribe drugi