How to biding object of object in angular?

Question

I have this object:

    data = {
      campaign: {
        testeA: 1,
        testeB: 2,
        testeC: 3
      }
       category{
        categoryA: 15
       }
      ...
     }

I want to bind it on my template, so I tried using keyValuePipe

<p *ngFor= "let item of data| keyvalue"> {{item.key}}</p>

It's working and is showing the text campaign and category, but I need to show the results too How can I do it?

Raphael Marques · Answer 1 · 2022-01-28T12:43:49.150

0

you have to use the name of the variables to bind it to render it, like:

<p *ngFor= "let item of dados"> 
{{item.campaign.testeA}}
{{item.campaign.testeB}}
{{item.campaign.testeC}}
{{item.category.categoryA}}
</p>

Considering that dados is related to data and it's a list of this object

edited Jan 28 '22 at 12:43

answered Jan 28 '22 at 12:36

Raphael Marques

699
4
16

But I need to be dynamically. – Desenv Junior Jan 28 '22 at 12:37
1

this is dynamically, otherwise the problem is not how to show, but how to structure you data archtecture – Raphael Marques Jan 28 '22 at 12:40
1

Look into this link https://stackoverflow.com/questions/35534959/access-key-and-value-of-object-using-ngfor – Abhishek Jan 28 '22 at 12:41

score 0 · Answer 2 · answered Jan 28 '22 at 13:37

0

You will probably need to add a second *ngFor statement to get the results e.g.:

<p *ngFor= "let item of data| keyvalue"> 
    <span *ngFor="let i of item | keyvalue">
      {{i.key}}
    </span>
</p>

answered Jan 28 '22 at 13:37

Raffael

249
2
7

score 0 · Accepted Answer · answered Jan 30 '22 at 05:43

It seems like you want to iterate over the keys and values of your nested objects too. You can accomplish this with the following code:

<div *ngFor="let categoryObject of data | keyvalue">
  <b>{{ categoryObject.key }}:</b>
  <div
    *ngFor="let innerCategoryObject of categoryObject.value | keyvalue"
    style="margin-left: 20px"
  >
    <b>{{ innerCategoryObject.key }}:</b>
    {{ innerCategoryObject.value }}
  </div>
</div>

There are a couple ways you can do this, including using the expanded version of *ngFor which will let you declare variables for the template. There's some tradeoff though as you can't type the variables you declare.

You can find other examples of how you can do this in this StackBlitz: https://stackblitz.com/edit/angular-r1nme6

How to biding object of object in angular?

3 Answers3