Read local json files in angular 4 ?

sandeep negi's photo
sandeep negi
·

1 min read

This will be short tutorial

Key points:

  1. Store the json in the assets folder
  2. We will be using http.get to the get the json
  3. Then we will be parsing the json to the json object and then we will assign it to a variable and then using ngfor we will show the data in a table.

Code

How to read from json local


ngOnInit() {
    this.http.get("./assets/datajson/data.json").subscribe(

      data => {
        var jsonObject = JSON.parse(data.text());
        this.applications = jsonObject;
      },

      (err) => {  
        console.log(err);
      }
    )
  }

How to show data in a table ?

 <div class="row">
   <div class="col-md-12">
      <table class="table table-striped">
        <thead>
          <tr>
            <th>Application name</th>
            <th>Description</th>
            <th>Application Key</th>
            <th>New Request Link</th>
            <th>Search Link</th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let application of applications">
            <td>{{application.name}}</td>
            <td>{{application.desc}}</td>
            <td>{{application.key}}</td>
            <td> <a href={{application.newlink}} target="_blank">{{application.newlink}}</a></td>
            <td> <a href={{application.searchlink}} target="_blank">{{application.searchlink}}</a></td>
          </tr>
        </tbody>
      </table>
   </div>

any questions feel free to reach out to me. :)

Angular