How to show all objects in an array with the same name


#1

How can I get to display the two category names on a ionic card. Currently doing
{{post.post_categories[0].name}} returns only the first name. How to do I get the second one to show as well?
Below is part of my wordpres rest api json response.

},
post_categories: [
{
name: "Education"
},
{
name: "Health"
}
]

This is my html

<ion-card *ngFor="let post of posts | async" (click)="navigateToDetail(post.id)" >
    <ion-card-content>
      <h1 [innerHTML]="post?.title.rendered"></h1>
      <p [innerHTML]="post?.excerpt.rendered"></p>
      <ion-row>
        <ion-col>
          <b>{{post?.date | date: "dd MMM yyyy"}}</b> |
          <ion-badge color="second"[innerHTML]="post?.post_categories[0].name"></ion-badge>
        </ion-col>
      </ion-row>
    </ion-card-content>
  </ion-card>

#2
<div *ngFor="let categories of post_categories">

{{ categories.name }}

</div>

This is how I done you may try


#3

Why are you using the Elvis operator?


#4

I tried this and nothing comes up with no errors. I further modified the json response to show this

post_categories: [
{
term_id: 6615,
name: "Education"
},
{
term_id: 45,
name: "Health"
}
],

Now if change the array number I get it to show up.
{{post?.post_categories[0]?.name}} {{post?.post_categories[1]?.name}}

Thanks for your help it was greatly appreciated :grinning:


#5

To check to see if it exists first before displaying anything. That way if there is null or undefined it wont throw an error


#6

It is inside of an ngFor. Why would there ever be null or undefined elements in your posts array?


#7

I dont know, but it was throwing me and undefined error when I didn’t have it. For example in my html I have this

<ion-card *ngFor="let post of posts | async" (click)="navigateToDetail(post.id)" >
    <ion-card-content>
      <h1 [innerHTML]="post?.title.rendered"></h1>
      <p [innerHTML]="post?.excerpt.rendered"></p>
      <ion-row>
        <ion-col>
          <b>{{post?.date | date: "dd MMM yyyy"}}</b> |
          <ion-badge color="second"[innerHTML]="post?.post_categories[0]?.name"></ion-badge>
          <ion-badge color="second"[innerHTML]="post?.post_categories[1]?.name"></ion-badge>
          <ion-badge color="second"[innerHTML]="post?.post_categories[2]?.name"></ion-badge>
          <ion-badge color="second"[innerHTML]="post?.post_categories[3]?.name"></ion-badge>

        </ion-col>
      </ion-row>
    </ion-card-content>
  </ion-card>

If a post doesn’t have four categories it throws an error if I dont use the ? operator. Im using an Observable and async so maybe that’s why its causing the issue.


#8

hello,

I tought that too ?. is elvis operator. Today I learned, in kotlin ?. is called safe call operator and ?: is elvis operator. kotlin has no ternary operator. This things are so annoying, so much annoying.

Best regards, anna-liebt

edit: Sorry for off topic.


#9

Try this, with nary an Elvis operator in sight:

<ion-card *ngFor="let post of posts | async" (click)="navigateToDetail(post.id)" >
  <ion-card-content>
    <h1 [innerHTML]="post.title.rendered"></h1>
    <p [innerHTML]="post.excerpt.rendered"></p>
    <ion-row>
      <ion-col>
        <b>{{post.date | date: "dd MMM yyyy"}}</b> |
        <ion-badge color="second" 
                   *ngFor="let cat of post.post_categories"  
                   [innerHTML]="cat.name">
        </ion-badge>
      </ion-col>
    </ion-row>
  </ion-card-content>
</ion-card>

#10

I get this error using the code you provided.


#11

That’s weird, because the part that uses the async pipe I just copied directly from your original.


#12

Yh it is. Im also lazy loading the page and using an observable. Is there a way I can cache an observable?


#13

You can nest ngFor loops…

<ion-card *ngFor="let post of posts | async" (click)="navigateToDetail(post.id)">
    <ion-card-content>
        <h1 [innerHTML]="post?.title.rendered"></h1>
        <p [innerHTML]="post?.excerpt.rendered"></p>
        <ion-row>
            <ion-col>
                <b>{{post?.date | date: "dd MMM yyyy"}}</b> |
                <ng-container *ngFor="let category of post.post_categories">
                    <ion-badge color="second" [innerHTML]="category.name"></ion-badge>
                </ng-container>
            </ion-col>
        </ion-row>
    </ion-card-content>
</ion-card>

#14

gg

I get this error using this method. I did this and it works How to show all objects in an array with the same name


#15

That’s coming from the async pipe. None of the code inside the ion-card should be an issue as it’ll only render after the async pipe resolves the observable. One potential issue is the “post.id” inside the click function.

Try moving the ngFor portion to an ng-container instead of being directly in the ion-card. That will ensure nothing tries to access a post that doesn’t exist.


#16

I dont know if im doing anything wrong but I got the same error as before. However the method I said I used is working. Thank you all for your help. I was wondering how do I cache the post page and post-detail pages in this thread: How do you cache http request using this method