Parse data from an object inside a JSON in Angular2

1

I followed this tutorial to create a table with a JSON in Angular 2 .

link

My question is, if I had a JSON of this type:

{"visitas": [{
    "_id": "586b5d313406cd103c3f38d5",
    "fecha":"01-ene-2017",
    "paciente": {
        "_id": "586b525dcd09c319a04d7da1",
        "edad": "25",
        "nombre": "Paciente1"
    },
    "diagnostico": "Diagnostico de visita",
}]}

How do I parse the nombre or the edad of my patient in the table?

This is the view of my component:

<table>
  <thead>
    <tr>
      <th *ngFor="let column of columns">{{column.header}}</th>
    </tr>
  </thead>
  <tbody *ngFor="let row of getData()">
    <tr>
      <td *ngFor="let column of columns">{{row[column.value]}}</td>
    </tr>
  </tbody>
</table>

... and my selector datatable in another view is this:

<md-card>
  <h3>Tabla Dinamica de Pacientes</h3>
  <datatable [dataset]=visitas [enableFilter]=true >
    <column [value]="'fecha'" [header]="'Fecha'"></column>
    <column [value]="'paciente'" [header]="'Paciente'"></column>
    <column [value]="'edad'" [header]="'Edad'"></column>
    <column [value]="'diagnostico'" [header]="'Diagnostico'"></column>
    <column [value]="'_id'" [header]="'Id'"></column>
  </datatable>
</md-card>

... but I get that in the name of my paciente there is an object:

  "Fecha"   -   "Paciente"  -  "Edad" -   "Diagnóstico"     -          "ID"
"01-ene-2017" "[object Object]"      "Diagnóstico de visita" "586B5D313406CD103C3F38D5"

... and if I put the following, nothing is reflected.

<column [value]="'paciente.nombre'" [header]="'Paciente'"></column>
    
asked by Ricardo 31.01.2017 в 22:36
source

2 answers

0

You have to initialize that json to an object, first create your class of it in a model like this:

export class Contact {     name: string;     last_name: string;     email: string;

constructor(json?) {
  this.name = json && json.name;
  this.last_name = json && json.last_name;
  this.email = json && json.email;
}

}

Afterwards you already use it in your class initializing it :

this.contact = new Contact(tuJSON);
    
answered by 22.03.2017 / 16:28
source
0

Try with:

<md-card>
  <h3>Tabla Dinamica de Pacientes</h3>
  <datatable [dataset]=visitas [enableFilter]=true >
    <column [value]="{{fecha}}" [header]="'Fecha'"></column>
    <column [value]="{{paciente.nombre}}" [header]="'Paciente'"></column>
    <column [value]="{{edad}}" [header]="'Edad'"></column>
    <column [value]="{{diagnostico}}" [header]="'Diagnostico'"></column>
    <column [value]="{{_id}}" [header]="'Id'"></column>
  </datatable>
</md-card>
    
answered by 16.02.2017 в 22:23