Nested JSON data loop for *ngFor in angular 5/4

Question

I am new to angular, I have created a service to loop the nested json data for my list.

export const CATEGORIES: Category[] = [
{
    id: 1,
    categoryName:'Accessories',
    subcatName: [
        {subcategory: 'belts',}
    ],
},
{
    id: 2,
    categoryName:'Clothing',
    subcatName: [
        {subcategory: 'jeans}',
    ],
},

];

and

@Injectable()
export class CategoriesService {

 constructor() { }

  getCategories(): Category[]{
    return CATEGORIES;
  }
}

I am trying to loop this data on my list

<ul>
    <li *ngFor="let cat of categoryList">
        <a href="#">{{cat.categoryName}}</a>
            <ul>
            <li *ngFor="let subcat of categoryList">
                <a href="#"> asdad {{subcat.subcategory}}</a>
            </li>
        </ul>
    </li>
</ul>

For this I have added code in component .ts file

 export class CategoriesComponent implements OnInit {

 categoryList: Category[];

 constructor(private categoryservice: CategoriesService) { }

 ngOnInit() {
   this.categoryList = this.categoryservice.getCategories();
 }

}

Please help, I want to create a navbar list of categories, when upon hover it shows the relevant subcategory. Please let me know if you need additional information.

Ayman El Temsahi · Accepted Answer · 2018-04-29 10:32:17Z

1

in the inner loop, you should loop over the inner array

<ul>
    <li *ngFor="let cat of categoryList">
        <a href="#">{{cat.categoryName}}</a>
            <ul>
            <li *ngFor="let subcat of cat.subcatName">
                <a href="#"> asdad {{subcat.subcategory}}</a>
            </li>
        </ul>
    </li>
</ul>

answered Apr 29, 2018 at 10:32

Ayman El Temsahi

2,6102 gold badges19 silver badges29 bronze badges

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

Comments

Sajeetharan · Accepted Answer · 2018-04-29 10:44:21Z

1

Your inner loop should iterate over cat of the parent not categoryList

Change

From

 <li *ngFor="let subcat of categoryList">
    <a href="#"> asdad {{subcat.subcategory}}</a>
 </li>

To

<li *ngFor="let subcat of cat.subcatName">
     <a href="#"> asdad {{subcat.subcategory}}</a>
</li>

answered Apr 29, 2018 at 10:44

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

Collectives™ on Stack Overflow

Nested JSON data loop for *ngFor in angular 5/4

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related