CODEWITHSUNDEEP
angular
C0mpl3x
C0mpl3x

Reputation: 532

Angular how to map key and value

So I'm trying to map and object. It has a key and that key has a value. I get the whole receipt from the server and this is the part with payments (It's the preview of the response I got):

paragonSequenceNumber: null
payments: {CARD: 4, CASH: 8}
pkp: "BBBBBBBBBBBBBBBBBBBBB"

So I'm mapping it and then using it in html with *ngFor and then writing out the values for the keys. this is my ReceiptDTO:

export interface ReceiptDTO {
        payments: {[key: string]: number }; // key: ReceiptPaymentType (enums)
}

This is my ReceiptViewModel

interface ReceiptViewModel {
  payments: {[key: string]: number }[]; // I'm not actually sure what to put here
}

This is the PaymentViewModel

interface PaymentViewModel {
  CASH: number;
  CARD: number;
  VOUCHER: number;
}

And this is what I tried using for the ReceiptViewModel ,first Just using it like this:

payments: data.receipt.payments,

Then like this:

payments: Object.entries(data.receipt.payments).map(([key, value]) => {
        return <PaymentViewModel>{
          CASH: value.CASH,
          CARD: value.CARD,
          VOUCHER: value.VOUCHER,
        };
      })

But none of the work and what I'd like to happen is to be able to use it in html like this:

<tbody *ngFor="let payment of receipt.payments">
        <tr>
          <th>{{'models.Receipt.payments.paymentType.CASH' | translate}}</th>
          <th>{{payment.CASH}}</th>
        </tr>
        <tr>
          <th>{{'models.Receipt.payments.paymentType.CARD' | translate}}</th>
          <th>{{payment.CARD}}</th>
        </tr>
        </tbody>

Upvotes: 4

Views: 3394

Answers (1)

mss
mss

Reputation: 1493

As far as I understood, you want to display the different types of payment done for a recipt in * ngFor, so my below answer is based on that assumption

You said you are getting this response

paragonSequenceNumber: null
payments: {CARD: 4, CASH: 8}
pkp: "BBBBBBBBBBBBBBBBBBBBB"

and your ReceiptDTO is mapped like this

export interface ReceiptDTO {
        payments: {[key: string]: number }; // key: ReceiptPaymentType (enums)
}

everything seems fine till now here I think for ReceiptViewModel you need to update like this

here make a interface for PaymentTypeInfo like this

interface PaymentTypeInfo {
    paymentTypeName: string;
    paymentTypeValue: number;
}

then specify the type

This is my ReceiptViewModel

interface ReceiptViewModel {
  payments: PaymentTypeInfo[]; // basically array donates the different type of payment like cash, card, etc. then for each index i.e type of payment, which contain the paymentTypeName and it's value
}

This is the PaymentViewModel as you mentioned

interface PaymentViewModel {
  CASH?: number;
  CARD?: number;
  VOUCHER?: number;
}

based on the value of payment that we assigned I thing we need to update this one like this

payments: Object.entries(data.receipt.payments).map((key, value) => {
    const currentPaymentTypeInfo : PaymentTypeInfo = {
        paymentTypeName : key,
        paymentTypeValue: value
    }
    return currentPaymentTypeInfo;
};

once it is done, we need to update the html part like this

<tbody *ngFor="let payment of receipt.payments" >
    <tr>
        <th>Payment-Type : {{payment.paymentTypeName}}</th>
        <th>It's value : {{payment.paymentTypeValue}}</th>
</tbody >

Upvotes: 3

Related Questions