Angular loop through Object in array

Question

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.

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;

}

when i use {{comment.user.userName}} i get src/app/postinfo/postinfo.component.html:36:20 - error TS2339: Property 'userName' does not exist on type 'string[]'. 36 {{comment.user.userName}} — Peetkovski
– Peetkovski, Commented Apr 12, 2022 at 22:59
src/app/postinfo/postinfo.component.html:36:20 - error TS7015: Element implicitly has an 'any' type because index expression is not of type 'number'. 36 {{comment.user['userName']}} — Peetkovski
– Peetkovski, Commented Apr 12, 2022 at 23:00

Joosep Parts · Accepted Answer · 2022-04-13 06:15:01Z

1

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;
}

edited Apr 13, 2022 at 6:15

answered Apr 13, 2022 at 2:10

Joosep Parts

6,3452 gold badges13 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Peetkovski Over a year ago

I added this {{comment?.user?.userName}} to my code and still get the error TS2339: Property 'userName' does not exist on type 'string[]'. 34 {{comment?.user?.userName}}

Joosep Parts Over a year ago

It's hard to understand your conext how you are using this. But I am guessing in template literal. Add check the existence with *ngIf and then access when present. I have updated my code.

AVJT82 Over a year ago

@Joosep.P check the Comment class... OP has defined user to be a string, whereas it is an object... should create a class for the user as well....

Joosep Parts Over a year ago

@AT82 ah yes... he has edited the question now. Thanks

Piyush Jain · Accepted Answer · 2022-04-13 02:50:19Z

1

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

answered Apr 13, 2022 at 2:50

Piyush Jain

3233 silver badges10 bronze badges

Collectives™ on Stack Overflow

Angular loop through Object in array

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related