How to read a static json and populate a comment section in Angular?

Question

I have created a json file in assets folder. Below is the json

    [
    {
        "userEmail": "IronMan@in.com",
        "comment": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent placerat metus at mauris sagittis interdum adipiscing placerat metus.",
        "commentDate": "08-01-2021 06:17:20 PM"
    },
    {
        "userEmail": "CaptainAmerica@in.com",
        "comment": "lLorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent placerat metus at mauris sagittis interdum. Cras lacinia posuere egestas.",
        "commentDate": "08-01-2021 06:17:20 PM"
    }
]

my HTML where i need to insert this looks like this

<!-- new chat -->
            <div class="bx--col-lg-4 comment_section" style="position: fixed">
               <!-- <div class="check">
                  <strong>Start the discussion</strong>
               </div> -->
               <div class="test">
                  <strong>Start the discussion</strong><br>
                  <strong>Title</strong>
                  <p>More clarity is required on submitted evidence</p>
                  <div>
                     <strong>Adam's comment</strong> <br>
                     <label class="bx--label">10 March 2019</label>
                     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent placerat metus at mauris
                        sagittis interdum adipiscing placerat metus.</p>
                  </div>
                  <div>
                     <div>
                        <img src="https://avatarfiles.alphacoders.com/139/139523.jpg" class="img-rounded-cust">
                        <label class="bx--label">Time open: 1 day 3 hr 2 mins <br>
                           Last updated: 8 Oct 2018 7:29 PM</label>
                        <!-- <label class="bx--label">Last Updated</label> -->
                     </div>

                     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent placerat metus at mauris
                        sagittis interdum adipiscing placerat metus.</p>
                  </div>
                  <div>
                     <div>
                        <img src="https://avatarfiles.alphacoders.com/221/221555.jpg" class="img-rounded-cust">
                        <label class="bx--label">Time open: 1 day 3 hr 2 mins <br>
                           Last updated: 8 Oct 2018 7:29 PM</label>
                        <!-- <label class="bx--label">Last Updated</label> -->
                     </div>

                     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent placerat metus at mauris
                        sagittis interdum.</p>
                  </div>
                  <i-label class="bx--form-item"><label class="bx--label" for="i-label-3"
                        style="font-weight: 600 !important;"> Your Comment
                     </label>
                     <div class="bx--text-area__wrapper">
                        <!----><textarea aria-label="textarea" itextarea="" placeholder="Write your comments here"
                           rows="4" cols="50" class="bx--text-area" id="i-label-3"></textarea></div>



                  </i-label>
                  <br>
                  <button class="bx--btn bx--btn--primary" style="left: 60%;">Submit</button>
               </div>
            </div>

            <!-- new chat ends -->

I am new to angular, can someone explain me by showing how to call this json in a service and populate the HTML. Also, will this service lie in this component or anywhere in the app folder.

You're looking for the [ngFor](https://angular.io/api/common/NgForOf) directive. Parse your JSON data into an array of objects and bind the list to a template element. — D M, Jan 08 '21 at 15:09
no, i just want to populate the HTML though json and not use the text i have written in HTML. — Jayant Kaushik, Jan 08 '21 at 15:24
The Angular way to do this is to bind a template to your data using the ngFor directive. If you don't want any extra HTML in your template, you will have to dynamically create nodes in the codebehind and insert them into the component's template. — D M, Jan 08 '21 at 15:26
can you show me if its feasible for you via stackblitz.com, It would be great for my learning. Would really apreciate — Jayant Kaushik, Jan 08 '21 at 15:28
Here is a [demo](https://stackblitz.com/edit/angular-ivy-gkbwqn?file=src/app/data.json) of using the ```ngFor``` directive to bind your data to a template. The relevant code is in ```app.component.ts``` and ```app.component.html```. This does not cover retrieving the data from a service/API call. — D M, Jan 08 '21 at 15:46
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/227052/discussion-between-jayant-kaushik-and-dakota-methvin). — Jayant Kaushik, Jan 08 '21 at 17:43

score 1 · Accepted Answer · answered Jan 11 '21 at 07:00

App component.ts

import { Component, VERSION, OnInit } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})

export class AppComponent implements OnInit  {

  data: Array<any>;

  ngOnInit(): void {

// This simulates fetching and parsing your JSON data
// from a service call. You will need to implement that
// yourself.
this.data = [
  {
    "userEmail": "IronMan@in.com",
    "comment": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent placerat metus at mauris sagittis interdum adipiscing placerat metus.",
    "commentDate": "08-01-2021 06:17:20 PM"
  },
  {
    "userEmail": "CaptainAmerica@in.com",
    "comment": "lLorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent placerat metus at mauris sagittis interdum. Cras lacinia posuere egestas.",
    "commentDate": "08-01-2021 06:17:20 PM"
  }
];

} }

app component.html

<!-- This template uses the ngFor directive to create
 a comment for each element in your array. -->
<div *ngFor="let d of data" style="padding: 8px;">
  {{d.comment}}
  <br><span style="font-size: 12px; font-weight: bold;">{{d.userEmail}}</span>
  <br><span style="font-size: 10px;">{{d.commentDate}}</span>
</div>

How to read a static json and populate a comment section in Angular?

1 Answers1