typescript - Loading some json objects -

i load json:

[{         "id": "0a4bf3b5bb5f47ece9284052389ae02f6c9dba989ca34086a30e049ee3d8eb47",         "name": "celery",         "status": "offline",         "servicecontrolled": true }, {         "id": "ec9471ec001c10b9fa286e1f52e39c5dc9485a7c2cfbf55145c26242bb98ec4d",          "name": "nginx",          "status": "online",          "servicecontrolled": false }] 

and show servicecontrolled in html:

 <td>     <span>{{ service_rec.servicecontrolled }}</span>  </td> 

how show "servicecontrolled": true in html code?

edit:

now question more precise, is:

<td>     <span *ngif="!!service_rec.servicecontrolled">"servicecontrolled": {{ service_rec.servicecontrolled | json }}</span> </td> 

old answer (thought wanted display “true” or “false”): about:

<td>     <span>"servicecontrolled": {{ service_rec.servicecontrolled | json }}</span> </td> 

seems trick, straightforward…

or write boolean pipe format boolean string (see https://angular.io/docs/ts/latest/guide/pipes.html).

something like:

import { pipe, pipetransform } '@angular/core';  @pipe({name: 'booleantostring'}) export class booleantostringpipe implements pipetransform {   transform(value: boolean): string {     return (!!value) ? 'true' : 'false';   } } 

then, in html (with pipe loaded in pipes key of @component decorator):

<td>     <span>"servicecontrolled": {{ service_rec.servicecontrolled | booleantostring }}</span> </td>