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": "[email protected]",
        "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": "[email protected]",
        "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.

Answer 1

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": "[email protected]",
    "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": "[email protected]",
    "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>