How to display object only after all process is complete?

Question

I am working on the displaying data into the cards. There are around 12 cards. So what I am trying is to collect all the card content into an object and once all the data are pushed to object then render it to cards.

This is the code I have tried:

public cardObj: {} = {};
loadData() {
    this.cardObj["card_1"] = {
        a: selectedProductRow["aa"],
        b: selectedProductRow["bb"],
        c: selectedProductRow["cc"],
    };
    this.calculateYTDRate(salid, prvid);
    console.log("filters", this.cardObj);
}

calculateYTDRate(salid: string, prvid: number) {
    this.boService.getYTDRate(salid, prvid)
        .subscribe((res) => {
            let keys = Object.keys(res.data);

            //card 2
            let c2 = res.data[keys[0]].sumturn;

            this.cardObj["card_2"] = {
                year: `YTD ${keys[0]}`,
                value: this.nFormatter(c6),
            };


            let c3 = res.data[keys[1]].sumturn;
            this.cardObj["card_3"] = {
                year: `YTD ${keys[1]}`,
                value: this.nFormatter(c7),
            };


            this.cardObj["card_4"] = {
                growthYTD: (((c7 / c6) - 1) * 100).toFixed(2) + '%'
            };
        },
            (err) => {
                console.log("Error calculating YTD Rate" + err);
            }
        );
}

Here "card_1" is pushed very quick to cardObj while other card inside calculateYTDRate() takes about 2-3 minutes to compute and push to object.

Even though this function is running in background console.log("filters", this.cardObj) executes which render cards.

I want to execute this console after all my cards are pushed to object.

How can I fix this issue?