#How to Loop Through Properties in Nested Object in Angular

16 messages · Page 1 of 1 (latest)

astral cedar
#

Hello friends
I have below Object/s defined in the Constructor

this.movie = {'title': 'Krish','collection': '2mill','rating': 4,'yearlyrevenue': {'2015': '1mill','2016': '1.2mill','2017': '1.5mill'}};    
this.movies['block1'] = this.movie;

How can I loop through this in Angular Component Template

<div *ngFor="let movie of movies | keyvalue"> 
    {{movie.value | json}}  
    <div *ngFor="let obj of movie.value"></div>
</div>
stiff mango
#

<div *ngFor="let movie of movies"> {{ movie.title }}
</div>

astral cedar
# stiff mango <div *ngFor="let movie of movies"> {{ movie.title }} </div>

Hi Thx for the Reply. I am getting following error: Compiled with problems:X

ERROR

src/app/modules/projects/webprojects/objects/contentgrid/contentgrid.component.html:16:26 - error TS2322: Type 'unknown' is not assignable to type 'NgIterable<any> | null | undefined'.

16 <div *ngFor="let obj of movie.value">
~~

src/app/modules/projects/webprojects/objects/contentgrid/contentgrid.component.ts:12:16
12 templateUrl: './contentgrid.component.html',
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Error occurs in the template of component ContentgridComponent.

stiff mango
#

<div *ngFor="let obj of movie.value"> ??? i don't write this

astral cedar
stiff mango
#

error ?

astral cedar
#

I have this in the component file ```ts
movie: any = {};
movies: any = {};

constructor(private mediaObserver: MediaObserver, private activatedRoute: ActivatedRoute){
this.movie = {
'title': 'Krish',
'collection': '2mill',
'rating': 4,
'yearlyrevenue': {
'2015': '1mill',
'2016': '1.2mill',
'2017': '1.5mill'
}
};
this.movies = {"block1": this.movie};
};

wind dome
#

It would be much more helpful to show your array instead of a single element

stiff mango
#

<div >
{{movies.block1.tittle}}
</div>

#

OR <div>
{{movie..tittle}}
</div>

#

---> {{ myobject.myproperty }}

#

with an array of objects :

movies = [    // array
  {           // object      
      'title': 'Krish11',
  }, 
  {           // object  
      'title': 'Krish22',
  }
];


<div *ngFor="let movie of movies">  <!--   iter to array -->
    {{movie.title}}
</div>
astral cedar
astral cedar
stiff mango
#

i check 😉

#

I don't have access to the code, just the execution