CODEWITHSUNDEEP
htmlangulartypescriptloops
Peetkovski
Peetkovski

Reputation: 48

Angular loop through Object in array

Hi this is my angular project and I want to get userName of user for every posted comment. The entities are from my spring boot project. Is there a way to get a username for every comment?

This is comment log.

enter image description here

This is my comments Service class

  getAllCommentsForPost(postId: string): Observable<Comment[]>{
    return this.http.get<Comment[]>(this.PATH_OF_API + "/api/comment/get"+postId)
 }

This is my component

   comments!: Comment[];
  constructor(private router: Router,private postService: PostService, private commentService: CommentService) { }

this.commentService.getAllCommentsForPost(this.router.url).subscribe((data: Comment[]) =>{
      this.comments = data;
    })

Html

 <div class="mb-1" style="width: 60%" *ngFor="let comment of comments">

    {{comment.comment}}
    <p *ngIf="comment.voteCount > 0" class="likes" style="color: green">  Likes: {{comment.voteCount}} </p>
    <p *ngIf="comment.voteCount == 0" class="like" style="color: black"> Likes: {{comment.voteCount}} </p>
    <p *ngIf="comment.voteCount < 0" class="likes" style="color: red"> Likes: {{comment.voteCount}} </p>
    <a [routerLink]="['/like', comment.commentId]">  <p>like</p>  </a>
  </div>

I am getting error when i add

{{comment.user.userName}} 
{{comment.user['userName']}}

this is my comment and user class

export class Comment {
  commentId!: number;
  comment!: string;
  voteCount!: number;
  dateCreated!: string;
  user!: string;
  postId!: number;
}


export class User {
  userName!: string;
  userPic!: string;
  gender!: string;

}

Upvotes: 0

Views: 1138

Answers (2)

Joosep Parts
Joosep Parts

Reputation: 6245

What you are doing should work. I would prevent such errors with the use of ? when accessing props. It might be, that not each comment has a userName (perhaps a anonymous comment of a sort?).

Checks if object has properties to be accessed and if it does, contents of *ngIf is rendered in html.

<ng-container *ngIf="comment?.user?.userName"> 
  {{comment.user.userName}} 
</ng-container>

Afterwards implement class Comment fully. Paste your response JSON here to have it generate all the classes/interfaces for you. https://quicktype.io/typescript

Class Commnet prop user should be of type User. Also I would ditch the ! unless you are sure what you are doing and you want acknowledge that the property will always be there to be accessed (I would doubt this) but then again, I don't know your API.

Place User inside of Comment, go over other types like this as well. If you resolve this, then the previous check for conditional property checks using ? might become obsolete.

export class Comment {
  commentId!: number;
  comment!: string;
  voteCount!: number;
  dateCreated!: string;
  user!: User;
  postId!: number;
}


export class User {
  userName!: string;
  userPic!: string;
  gender!: string;
}

Upvotes: 1

Piyush Jain
Piyush Jain

Reputation: 323

I guess you are using latest version of Typescript in new version of typescript there are Optional Chaining where your object are null & undefined then this Optional Chaining operator will help you determine this object id null or undefined
and in your case Optional Chaining(?) operator will help you
Click here to known more about optional chaining

Upvotes: 1

Related Questions