Issue
I want to show the name field from my obj to the template. My object contains an array of data from the backend which have a few more field apart from the name. response from the backend is in this formate :
{
"id": 2,
"name": "A Place for Everything",
"slug": "a-place-for-everything",
"image": {
"thumbnail": "http://127.0.0.1:6902/media/__sized__/merchants/c105bd1ed954c5c465cdd22d04d7009ed4486157-thumbnail-100x100-70.jpg",
"full_size": "http://127.0.0.1:6902/media/merchants/c105bd1ed954c5c465cdd22d04d7009ed4486157.jpg",
"small_square_crop": "http://127.0.0.1:6902/media/__sized__/merchants/c105bd1ed954c5c465cdd22d04d7009ed4486157-crop-c0-5__0-5-50x50-70.jpg",
"medium_square_crop": "http://127.0.0.1:6902/media/__sized__/merchants/c105bd1ed954c5c465cdd22d04d7009ed4486157-crop-c0-5__0-5-400x400-70.jpg"
}
}, {
"id": 3,
"name": "A Quarter Of",
"slug": "a-quarter-of",
"image": {
"thumbnail": "http://127.0.0.1:6902/media/__sized__/merchants/5f742766e7dec63e62baaf029f3d3d7025adac36-thumbnail-100x100-70.jpg",
"full_size": "http://127.0.0.1:6902/media/merchants/5f742766e7dec63e62baaf029f3d3d7025adac36.jpg",
"small_square_crop": "http://127.0.0.1:6902/media/__sized__/merchants/5f742766e7dec63e62baaf029f3d3d7025adac36-crop-c0-5__0-5-50x50-70.jpg",
"medium_square_crop": "http://127.0.0.1:6902/media/__sized__/merchants/5f742766e7dec63e62baaf029f3d3d7025adac36-crop-c0-5__0-5-400x400-70.jpg"
}
},
.ts file:
keys: any[] = []
merchant: any[] = []
popularMerchant: any[] = []
obj: {
[k: string]: any
} = {
A: [],
B: [],
C: [],
D: [],
E: [],
F: [],
G: [],
H: [],
I: [],
J: [],
K: [],
L: [],
M: [],
N: [],
O: [],
P: [],
Q: [],
R: [],
S: [],
T: [],
U: [],
V: [],
W: [],
X: [],
Y: [],
Z: []
};
ngOnInit(): void {
this.keys = Object.keys(this.obj)
for (let i of this.keys) {
this.api.getMerchantsWithAlbhabet(i).subscribe(response => {
this.merchant.push(response.results)
this.obj[i] = response.results;
})
}
this.getPopularMerchants()
}
.html file
<section class="dc-card stores">
<div *ngFor="let key of keys">
{{obj[key] | json}}
</div>
</section>
I tried doing {{obj[key].name | json}} in html file but it is not working.
Solution
<section class="dc-card stores mt-3">
<ng-container *ngFor="let key of keys">
<ng-container *ngIf="obj[key].length > 0">
<div *ngIf="!sectionToShow || sectionToShow == key" class="card flex-row my-2">
<div class="key">{{key}}</div>
<ul class="store mt-3">
<ng-container *ngFor="let eachMerchant of obj[key]">
<li class="p-1" (click)="merchantClicked(eachMerchant)">
{{eachMerchant.name}}
</li>
</ng-container>
</ul>
</div>
</ng-container>
</ng-container>
</section>
Answered By - Utkarsh Khare
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.