Issue
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?
Thanks :)
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>
Answered By - Ale_Bianco
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.