Struggling with handling 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",
"description": "A sustainable choice",
"image": "../../assets/images/catalogue/eco/bamboo-pendrive.png"
}
]
},
{
"productData": [
{
"id": 1101,
"name": "Bamboo tabletop items",
"description": "Eco-friendly products",
"image": "../../assets/images/catalogue/bags/bamboo-tabletop.png"
}
]
}
]
]
Implemented a service using http.get. Subscribed to data in app.component.ts:
Productinfo: any = []
constructor(private service: DataStorageService) {}
ngOnInit() {
this.service.GetProductDetails().subscribe(data => {
this.Productinfo = data;
})
}
Encountering challenges accessing the data in app.component.html
<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 product of Productinfo.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>
</div>
Error observed with Productinfo.productData. Is it necessary to access the productData array in TS file?
Requirement to conditionally display data based on category. Considering usage of *ngIf, seeking better alternatives. Any suggestions?
Appreciate your insights :)