This nested loop is giving me some trouble. I can't figure out what I'm doing incorrectly
There are categories and categories have posts. I want to retrieve the last post for a given category
#Nested ngFor
weak ferry
astral merlin
what's the problem? do you have an error? you don't see anything?
what code gets rendered if you inspect the browser window?
weak ferry
Yeah nothing is showing up
astral merlin
what code gets rendered if you inspect the browser window?
weak ferry
Nothing gets rendered
astral merlin
if nothing gets rendered, either you app is completely broken, or you have no categories.
try to make the first for work, ignoring what's inside
weak ferry
I can get it to render the last post with this:
It's just when I try to get the last post of category.posts it's just blank in the browser
I know i'm not explaining this very well
astral merlin
here you are using posts in the first example you are using categories
if NOTHING gets rendered, it means that categories is an empty array. Otherways you should see some <div> when you inspect the code
would be good if you share the code on Stackblitz
weak ferry
This is the div that i'm seeing in the console
astral merlin
ok something gets rendered, but it's hard to say what.
- Please do 2 things: add class="test-category" to the first
*ngFor - add this in your code: {{categories | json}}
then show what code gets rendered when you inspect your window
weak ferry
It's rendering the json for all of the categories
6 times because there are 6 categories
astral merlin
copy/paste it here 🙂
weak ferry
[ { "id": 1, "name": "Gaming Forum", "description": "The latest video game news, discussions, announcements, industry gossip, sales figures, bargains and reviews. The pulse of the gaming industry.", "createdAt": "2023-03-04T03:35:22", "status": "active", "viewCount": 0, "postCount": 1, "commentCount": 1, "enabled": true }, { "id": 2, "name": "Gaming Hangouts", "description": "If it's a community related to gaming, it has a home here! Official threads >1 month old, buy/sell/trade marketplace, gaming media fandoms, matchmaking, guilds and clans.", "createdAt": "2023-03-04T03:35:22", "status": "active", "viewCount": 0, "postCount": 1, "commentCount": 1, "enabled": true }, { "id": 3, "name": "Lore Forum", "description": "Everything else. Current events, entertainment, technology, life, food, politics, pets, randomness, and anything in between. Civil discourse triumphs.", "createdAt": "2023-03-04T03:35:22", "status": "active", "viewCount": 0, "postCount": 1, "commentCount": 1, "enabled": true }, { "id": 4, "name": "Lore Hangouts", "description": "Hobbyist enclaves. Sports followings. Official threads >1 month old. Local, international, and non-English language threads. Whatever your passion, find a community to share it with!", "createdAt": "2023-03-04T03:35:22", "status": "active", "viewCount": 0, "postCount": 1, "commentCount": 1, "enabled": true }, { "id": 5, "name": "Announcements", "description": "Resources and staff communication.", "createdAt": "2023-03-04T03:35:22", "status": "active", "viewCount": 0, "postCount": 1, "commentCount": 1, "enabled": true }, { "id": 6, "name": "The Vault", "description": "Treasured memories of threads past.", "createdAt": "2023-03-04T03:35:22", "status": "active", "viewCount": 0, "postCount": 1, "commentCount": 1, "enabled": true } ]
The fields ending with 'Count' are all hardcoded numbers in db
astral merlin
there are no postsinside. therefore *ngFor="let post of category.posts;wont work
category.posts doesn't exist.
weak ferry
omg
Looks like I never added posts property to my category model
Oh wait I did
So why would posts not show up in the json if posts does exist in the category model?
Ah
I think i found it
astral merlin
if they don't show up, they probably don't exist.
try to double-check your code, debug it, add some console.log.
See if the posts really are added or not
weak ferry
a jsonignore annotation on the backend
astral merlin
mystery solved 🥳