Display Json data when a button is being clicked and make a certain element display the Json data.

RESULT:

result of code

TS:

import UsersJson from '../../assets/users.json'; //Json file location
    
export class UsersComponent implements OnInit {
    
      getUsers(special:any):void{
    
      special.innerText = JSON.stringify(UsersJson).replace(/,|}|{|\\/g, "\n");
                  
          constructor() { }
        
          ngOnInit(): void { }
    }

HTML:

  <div >
    <button (click)="getUsers(lblName)">Show All Users</button>
  </div>

    <pre #lblName></pre>

Full documentation on my GitHub https://github.com/LearAdini/AngularJsonPipe

CodePudding user response：

You can use Angular built-in json pipe as :

{{ value_expression | json }}

JsonPipe API doc

Example:

HTML file:

<button (click)="getUsers()">Show All Users</button>

<h4 *ngIf="users">{{ users | json }}</h4> 

UsersComponent class:

export class UsersComponent implements OnInit {
  users: any;

  getUsers() {
    // fetch the json data and assign it to -> this.users
  }
}