Displaying dynamic API results in a span

@winningtech wrote:

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);
                });
        }
    });
}

Posts: 2

Participants: 2

Read full topic