263. Outputting Posts

Jul 21, 2026 06:04 · 2:15 · English · Whisper Turbo · 2 Wasemaji

Rekodi hii inamalizika 7 siku. Kufugwa kwa ajili ya uhifadhi wa kudumu →

Index YA TAA

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.

Nakala hii ilitokezwa na AI (utambuaji wa usemi wa kiaya). Inaweza kuwa na makosa Équipe dhidi ya sauti ya awali kwa utumizi wa kuchambua. Sera ya AI

❤️ Love STT.ai? Tell your friends!

Muhtasari

Bonyeza muhtasari ili kutokeza muhtasari wa AI juu ya nakala hii.

Uliza Maswali Kuhusu Mpito Huu

Uliza jambo lolote kuhusu nakala hii ya kitabu KULEA ile nitakayopata sehemu zinazofaa na majibu.

Trekta Nyingine