How to iterate over an array in Angular with nested comments

Question

I´ve been running around in iterated circles for several hours and have the sense the answer is staring me right in the face (and I have read a dozen similar questions) but I can't seem to see it.

I have this object:

{id: 1, firstName: "Rob", lastName: "Thompson", agent: 
"[email protected]", phone: null, …}
agent: "[email protected]"
comments: Array(2)
0: {id: 3, comment: "testing another comment"}
1: {id: 8, comment: "second comment"}
length: 2
__proto__: Array(0)
firstName: "Rob"
id: 1
lastName: "Thompson"
phone: null
__proto__: Object

that I am trying to display the comments on when I have selected that particular user.

I can access the first level fields easily and an individual comments via:

      {{gotClient.comments[0].comment}}

but in trying to display all comments associated with a user I am drawing a literal blank. This was the most recent attempt:

<div>
    <ol>
       <li *ngFor="let item of comments" > 
            <div>{{item.comments}}</div> 
               <ol>
                  <li *ngFor="let subItem of item['comments']"> 
                      <div>{{subItem.comment}}</div> 
                  </li>
                 </ol>
        </li>
       </ol>
   </div>

That´s producing literally a blank.

Please advise.

What is: let item of comments, Im guessing its the first comment level? — ukn
– ukn, Commented Jul 25, 2019 at 1:34
Yes, sir or ma'am - it is me attempting to iterative over the array: comments: Array(2) — Rob Thompson
– Rob Thompson, Commented Jul 25, 2019 at 1:35

ukn · Accepted Answer · 2019-07-25 01:39:05Z

1

Since comments is an array, the ngFor make you access each comment one by one(through item). Item is now: {id: 3, comment: "testing another comment"} so you can access it by doing item.comment

Try this out:

<div>
    <ol>
       <li *ngFor="let item of comments" > 
               <ol>
                  <li > 
                      <div>{{item.comment}}</div> 
                  </li>
               </ol>
        </li>
       </ol>
   </div>

answered Jul 25, 2019 at 1:39

ukn

1,8231 gold badge15 silver badges24 bronze badges

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

4 Comments

Rob Thompson Over a year ago

I feel like this should work but it´s producing a blank, too.

ukn Over a year ago

Add a <pre>{{ item | json }}</pre> inside the ngFor and tell me what it prints. If comments is really what you think, it should print: {id: 3, comment: "testing another comment"} and {id: 8, comment: "second comment"}

Rob Thompson Over a year ago

Your comment sent me on the right path. I did this:

Rob Thompson Over a year ago

<div *ngFor="let item of gotClient.comments">test {{item.comment}} </div> And it worked!

Collectives™ on Stack Overflow

How to iterate over an array in Angular with nested comments

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related