Home / Questions / 450080
Accepted
Fernando Javier León
Asked: 2022-05-07 21:48:13 +0800 CST 2022-05-07 21:48:13 +0800 CST

Looping through array with ngFor in Angular returns [object Object],[object Object]

  • 772

I have data with this structure:

data = {
   test: [
     {
       nombre_cv: "test",
       bloque: "Articulos",
       atributo: "titulo",
       visible_cv_personalizado: true
     }
   ],
   convocatoria: [
     {
       nombre_cv: "test",
       bloque: "Articulos",
       atributo: "id",
       visible_cv_personalizado: true
     },
     {
       nombre_cv: "test",
       bloque: "Articulos", 
       atributo: "titulo", 
       visible_cv_personalizado: true
     }
   ]
 }

I want the test and the call to be displayed with their properties, for this I use ngFor in the following way:

 <div class="card" *ngFor="let item of data | keyvalue">
      Key: <b>{{item.key}},</b> value: <b> {{item.value}} |</b>
 </div>

But at the time of displaying on the screen it returns me this:

Key: call, value: [object Object] | Key: test, value: [object Object],[object Object]

As you can see, it returns the key, but the properties come out with:

[objectObject],[objectObject].

How can I make it show me all the test and call properties? I thank you in advance, I hope you can help me.

javascript

1 Answers

  1. Best Answer

    As it tells you , you Sergioare iterating over an array object. Now, if the structure you have is going to always be maintained, that is, you are going to iterate an object that contains arrays, you can do the following according to your code.

    
<div class="card" *ngFor="let item of data">
   <p *ngFor="let itemAux of item | keyvalue">
      Key: <b>{{itemAux.key}},</b> value: <b> {{itemAux.value}} |</b>
   </p>
</div>

    Where you can see that we now iterate internally to your variable item. Generating an párrafointernal, which can be perfectly changed by a divif you require it.

    • 1