how to show the json in frontend using angular 4

Question

I am new to angular 4. I am facing problem in showing JSON in my html view. I have following json.

{"result":[
{"role_id":124,"role_name":"ramesh","roles":"user"},
{"role_id":123,"role_name":"suresh","roles":"admin"}
]
}

component file

export class LoginComponent implements OnInit {
  data: Object;
  loading: boolean;
  credentials: Credentials;
  constructor(private http: Http) { }

  ngOnInit() {
    this.credentials = new Credentials();
  }
  login():void{
    console.log(this.credentials);

    this.loading = true;
    this.data = {};
    this.http.request('http://localhost:8080/api/Sampledata')
      .subscribe((res: Response) => {
        this.data = res.json();
        this.loading = false;
        console.log(this.data)
      });

  }
}

Html File

<h2>Basic Request</h2>
    <button type="button" (click)="login()">Make Request</button>
    <div *ngIf="loading">loading...</div>
    <pre>{{data | json}}</pre>

I am getting the json in front end like this. Front End Image

I want to get role_name separately so i tried changing the html file like this

<h2>Basic Request</h2>
    <button type="button" (click)="login()">Make Request</button>
    <div *ngIf="loading">loading...</div>
    <pre>{{data?.role_name}}</pre>
    </div>

What is the right way to display just the role_name?

You have multiple role_names, I suppose you'd want to show them all? — bugs
– bugs, Commented May 18, 2018 at 8:32
What role_name? You have one for each object in your array... — Robby Cornelissen
– Robby Cornelissen, Commented May 18, 2018 at 8:32
@ Robby Cornelissen Oops My bad I missed it Thanx for pointing it out — Vikas
– Vikas, Commented May 18, 2018 at 8:38

Krishna Rathore · Accepted Answer · 2018-05-18 08:36:21Z

1

you can use *ngFor because data is in array of object.

<pre *ngFor="let res of data.result">{{res.role_name}}</pre>

answered May 18, 2018 at 8:36

Krishna Rathore

9,7375 gold badges28 silver badges50 bronze badges

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

Comments

Vikas · Accepted Answer · 2018-05-18 08:51:49Z

0

you can access a particular element using index

<h2>Basic Request</h2>
    <button type="button" (click)="login()">Make Request</button>
    <div *ngIf="loading">loading...</div>
    <pre>{{data.result[0]?.role_name}}</pre>
    </div

and if you want to list out all the names use *ngFor

<h2>Basic Request</h2>
        <button type="button" (click)="login()">Make Request</button>
        <div *ngIf="loading">loading...</div>
         <pre *ngFor="let r of data.result">{{r.role_name}}</pre>
     </div>

DEMO

edited May 18, 2018 at 8:51

answered May 18, 2018 at 8:45

Vikas

12.1k7 gold badges49 silver badges71 bronze badges

Comments

Pranay Rana · Accepted Answer · 2018-05-18 08:36:06Z

0

Do as below to list donw each property of you object

.subscribe((res: Response) => {
        this.data = res.json();
       if(this.data.result && this.data.result.length > 0)
        this.objekeys = Object.keys(this.data.result[0]);
        this.loading = false;
        console.log(this.data)
      });

<table>
   <tr *ngFor="let data of data.result">  
     <td *ngFor="let key of objekeys">
       <span>key </span> <span>data[key]</span>
     </td>
   </tr>
</table>

answered May 18, 2018 at 8:36

Pranay Rana

177k37 gold badges244 silver badges267 bronze badges

Collectives™ on Stack Overflow

how to show the json in frontend using angular 4

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related