How can I access specific data inside a JSON file on an Angular?
Problem
I've been trying to work with this JSON file
[ [ { "category": "Bags", "productData": [ { "id": 1000, "name": "Trolley backpack", "short description": "short description", "long description": "LONG DESCRIPTION", "image": "../../assets/images/catalogue/bags/trolleyBackpack.png" } ] }, { "productData": [ { "id": 1001, "name": "Laptop bag", "short description": "short description", "long description": "LONG DESCRIPTION", "image": "../../assets/images/catalogue/bags/laptopBag.png" } ] } ], [ { "category": "Eco", "productData": [ { "id": 1100, "name": "Bamboo Pen drive", "short description": "short description", "long description": "LONG DESCRIPTION", "image": "../../assets/images/catalogue/eco/bamboo-pendrive.png" } ] }, { "productData": [ { "id": 1101, "name": "Bamboo tabletop items", "short description": "short description", "long description": "LONG DESCRIPTION", "image": "../../assets/images/catalogue/bags/bamboo-tabletop.png" } ] } ] ] |
I created a service and used http.get. Then, in my app.component.ts I subscribed to the data with
Productinfo: any = []
constructor(private service: DataStorageService) {}
ngOnInit() { this.service.GetProductDetails().subscribe(data => { this.Productinfo = data; })
} |
I haven't been able to access this data in the app.component.html though
<div class="container"> <div class="row row-cols-sm-4 g-5"> <div class="col-sm-6 col-md-4 d-flex justify-content-center col-lg-3" *ngFor="let products of Productinfo.productData"> <div class="card card-cover h-100 overflow-hidden text-white bg-white rounded-5 shadow-lg" *ngIf=""> <img src="{{products.image}}" style="object-fit: cover;"> <div class="d-flex flex-column ps-3 pe-5 fontName text-light text-shadow-1 h-100" style="position: absolute;"> <h2 class="pt-5 mt-5 mb-4 display-6 lh-1 fw-bold" style="position: relative;"> {{products.name}} </h2> <img src="../../../assets/images/bonjour-logo.png" alt="Logo" width="32" height="32" class="rounded-circle border border-dark bg-dark" style="position: absolute; bottom: 15px;" /> </div> </div> </div> |
This solution with Productinfo.productData doesn't seem to work. Should I access the productData array in my TS file?
I would also like to be able to display data conditionally as well, based on category. I would assume that *ngIf is the way to go here, but I am unsure. Is there a better way to do it?
Solution
You're on the right track. However, it seems there's a slight misunderstanding in your HTML template.
You need to iterate over the outer array and then over the inner arrays to access the individual products.
<div class="container"> <ng-container *ngFor="let categoryArray of Productinfo"> <ng-container *ngFor="let category of categoryArray"> <div class="row row-cols-sm-4 g-5"> <div class="col-sm-6 col-md-4 d-flex justify-content-center col-lg-3" *ngFor="let product of category.productData"> <div class="card card-cover h-100 overflow-hidden text-white bg-white rounded-5 shadow-lg"> <img src="{{ product.image }}" style="object-fit: cover;"> <div class="d-flex flex-column ps-3 pe-5 fontName text-light text-shadow-1 h-100" style="position: absolute;"> <h2 class="pt-5 mt-5 mb-4 display-6 lh-1 fw-bold" style="position: relative;"> {{ product.name }} </h2> <img src="../../../assets/images/bonjour-logo.png" alt="Logo" width="32" height="32" class="rounded-circle border border-dark bg-dark" style="position: absolute; bottom: 15px;"> </div> </div> </div> </div> </ng-container> </ng-container> </div> |
Regarding conditional rendering based on the category, you can use ngIf in a similar manner. For example:
<div class="container"> <ng-container *ngFor="let categoryArray of Productinfo"> <ng-container *ngFor="let category of categoryArray"> <div *ngIf="category.category === 'Bags'"> <!-- Render content for Bags category --> </div> <div *ngIf="category.category === 'Eco'"> <!-- Render content for Eco category --> </div> <!-- Add more conditions as needed --> </ng-container> </ng-container> </div> |
Suggested blogs:
>How to make the dropdown for this button ADA accessible in Angular?
>How to update properties value with event in template Angular?
>Unit Test Angular Standalone Component, Overriding Provider not used
>How to Import componet's own module using Angular?
>Why component does not display variable of another component in Angular?
>What are the ways to pass parameters to Angular service?
>How to access variables in a function using Angular?
>How can I close a bootstrap modal using Angular?
>Fix: Strange compilation error with Typescript and Angular
>Uploading files and JSON data in the same request with Angular
>CRUD Operations In ASP.NET Core Using Entity Framework Core Code First with Angularjs
>CRUD Operation on Angular
>What is pipe in Angular?
>A Complete Guide To Angular Routing
