How to loop through unknow number of nested json object in Angular with ngFor?

Question

I'm trying to display all the reply from this json :

https://www.reddit.com/r/AskReddit/comments/k8w43d/people_with_the_last_name_pepper_who_have.json

So, depending of the post im loading and the reply, my number of children will differ. How can I loop throught it until I reach the last reply with children (body[2].data.children) ?

Like this :

<div class="replies-box" *ngFor="let reply of comments.body[1].data.children">
       <div class="reply-header">
            <p class="reply-author"><b>From</b> : {{ reply.data.author }}</p>
            <p class="reply-send"><b>Send</b> : {{ this.getDateReply(reply.data.created_utc) }}</p>
       </div>
       <div class="text-first-reply" [innerHTML]="this.getHtmlDecode(reply.data.body_html)">
         
       </div>
</div>

I have only the first level of reply, is there a way to simply loop through them all ? Thanks in advance.

Owen Kelvin · Accepted Answer · 2020-12-09 16:21:33Z

1

I would use a recursion type of approach.

Develop a app-comment component and if comment has children, loop over the children and display the app-comment. That way it will loop over the comments until no more children

<div *ngIf='comment'>
  <span *ngIf='comment.kind; else showComment'>Kind: {{ comment.kind }}</span>
  <ng-template #showComment>
    <span>{{ comment }}</span>
  </ng-template>
  <div>
   <app-comment *ngFor='let child of comment.data?.children' [comment]='child'> </app-comment>
  </div>
</div>

See this sample illustration

answered Dec 9, 2020 at 16:21

Owen Kelvin

15.1k11 gold badges51 silver badges85 bronze badges

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

1 Comment

Chabou bou Over a year ago

This is perfect, exactly what I needed thanks a lot !

Gourav Garg · Accepted Answer · 2020-12-08 16:40:00Z

Simply use ngFor inside ngFor with help of ng-container (will not create extra dom elements)

<div class="replies-box">
  <ng-container *ngFor="let commentBody of comments.body">
    <ng-container *ngFor="let reply of commentBody.data.children">
      <div class="reply-header">
        <p class="reply-author">
          <b>From</b> : {{ reply.data.author }}
        </p>
        <p class="reply-send">
          <b>Send</b> : {{ this.getDateReply(reply.data.created_utc) }}
        </p>
      </div>
      <div class="text-first-reply" [innerHTML]="this.getHtmlDecode(reply.data.body_html)">

      </div>
    </ng-container>
  </ng-container>
</div>

Collectives™ on Stack Overflow

How to loop through unknow number of nested json object in Angular with ngFor?

2 Answers 2

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Related