How to show JSON with an array inside in Angular 2?

Question

After solve lot of problems to make my app work, http headers and more... now it's working!

Now, when I try to show the data into my app I have a little problem - ask.

I have this schema:

export class Morosos {
idlor:  String;  comunidad: String; vivienda: String;  demandado:   String;  importe:   String;  datos: [{ fecha: String, dato: String }];  date: { type: Date };}

And I have this on .html component:

<tr *ngFor="let p of results; let i=index">
  <td>{{p.idlor}}</td>
  <td>{{p.comunidad}}</td>
  <td>{{p.vivienda}}</td>
  <td>{{p.demandado}}</td>
  <td>{{p.importe}}</td>
  <td>{{p.datos | json}} </td>
  <td>{{p.date}}</td>
</tr>

And i got this:

IDLOR Comunidad Vivienda Demandado Importe Datos Fecha LOR01/16 XXX XXX XXX XXXX [ { "fecha": "08/03/2017", "dato": "Pagado Ejecucion" }, { "fecha": "27/07/2016", "dato": "Carta enviada" } ] 1970-01-01T00:00:00.000Z

As you can see I have a JSON on "Datos" which is an array, now my dude is how to put it into a <tr><td> too.

Thanks :)

Could you include your result as your actual JSON, now it really doesn't make sense ;) — AVJT82
– AVJT82, Commented Mar 30, 2017 at 12:55
{ "_id": { "$oid": "58c81ba0fb02f3066e2af169" }, "idlor": "LOR01/16", "comunidad": "x", "vivienda": "x", "demandado": "x", "importe": "x", "datos": [ { "fecha": "08/03/2017", "dato": "Pagado Ejecucion" }, { "fecha": "27/07/2016", "dato": "Carta enviada" } ], "date": { "$date": "1970-01-01T00:00:00.000Z" } } — Miguel Sánchez Guerras
– Miguel Sánchez Guerras, Commented Mar 30, 2017 at 13:03

Thomson Ignesious · Accepted Answer · 2017-03-31 16:01:35Z

1

You can use one mre ngFor in the td with ul tag.

<td>
  <ul *ngFor="let p of p.datos">
    <li>{{p}}</li>
   </ul>
</td>

edited Mar 31, 2017 at 16:01

answered Mar 30, 2017 at 12:59

Thomson Ignesious

7351 gold badge9 silver badges28 bronze badges

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

1 Comment

Miguel Sánchez Guerras Over a year ago

Where you put "let p" is "let d" but it works fine. Thanks!

Collectives™ on Stack Overflow

How to show JSON with an array inside in Angular 2?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related