I’m getting a list (I’m calling it a collection) from an API, so there’s no telling how many items are in that list. Each list item has sub-items. I’m trying to display the quantity of sub-items next to the quantity of list items.
Something like “3 of 9”
I have the quantity of list items, and am able to get the quantity of sub-items, I just can’t figure out how to display them in the UI.
I was thinking I could create an array of items and use the collection ID as the key, but that doesn’t seem to be working.
collections.page.html
<ion-card *ngFor="let collection of collections">
<ion-card-header>
<ion-row>
<ion-col>
{{ collection.name }}
</ion-col>
<ion-col>
<!-- DISPLAY THE VALUE FROM GETDATA() HERE -->
<span name="fieldName" ngDefaultControl [(ngModel)]="collection[collection.id]"></span>
of {{ collection.items.length || '0' }}
</ion-col>
</ion-row>
</ion-card-header>
</ion-card>
collections.page.ts
collections: any;
quantity = [];
constructor(public http: HttpClient,private storage: Storage) {
this.getData();
}
getData() {
return this.storage.get('token').then(token => {
if (token) {
this.http.get('http://api.example.test/collections?api_token=' + token)
.subscribe((result: any) => {
this.collections = result.data.collections;
for (const collection of result.data.collections) {
const quantity = [];
quantity[collection.id] = 0;
for (const item of collection.items) {
if (item.myitems.length) {
for (const myitem of item.myitems) {
quantity[collection.id]++;
}
}
}
if (quantity[collection.id] > 0) {
// SHOW THIS VALUE IN THE SPAN
collection[collection.id] = quantity[collection.id];
}
}
}, error => {
console.warn(error);
});
}
});
}