Define arrays within array in Angular 2 and Typescript

Question

In Angular 2 I was wondering if it was possible to define an array that has multiple other arrays in it. It is probably easier to just show what I mean:

I started out using this:

export class PaymentDetails {
     account: any[];
     bpNumber: number;
}

but this gave me the problem that when I populated it I couldn't really access the data in the account array, as I want more arrays inside of it.

So now i would like to define my class like this:

export class PaymentDetails {
    account: [
        debitAccount: [
            {
                debitAccountId: string;
                debitBankCode: string;
                debitBankName: string;
                debitCountryCode: string;
                debitAccountNumber: string;
                debitAccountHolder: string;
                debitContinous: string;
                debitDueDate: string;
                iban: string;
                bic: string;
            }
        ],
        ccAccount: [
            {
                ccAccountId: string;
                ccCompanyCode: string;
                ccNumber: string;
                ccStart: string;
                ccExpiry: string;
                ccDsbTransactionId: string;
                ccCardholderName: string
            }
        ]
    ];
    bpNumber: number;

}

Is this at all possible?

The class is getting populated with this InMemoryDataService

export class InMemoryDataService {
  createDb() {
let paymentDetailsDB = [
      {
        account: [
          {
            debitAccount: [
              {
                debitAccountId: '8736583',
                debitBankCode: '45345',
                debitBankName: 'KSK HGTT',
                debitCountryCode: 'DE',
                debitAccountNumber: '123453463',
                debitAccountHolder: 'A Berg',
                debitContinous: '',
                debitDueDate: '',
                iban: 'DE12344235',
                bic: '324645',
              },
              {
                debitAccountId: '6567456',
                debitBankCode: '55463453',
                debitBankName: 'GRDFE',
                debitCountryCode: 'DE',
                debitAccountNumber: '000123492',
                debitAccountHolder: 'A Berg',
                debitContinous: '',
                debitDueDate: '',
                iban: 'DE43523453',
                bic: '123547665',
              }
            ],

            ccAccount: [
              {
                ccAccountId: '23413',
                ccCompanyCode: '254345',
                ccNumber: '238857827368837',
                ccStart: '2010-10-05',
                ccExpiry: '2018-10-05',
                ccDsbTransactionId: '235231',
                ccCardholderName: 'Anne Berg',
              }
            ],
          }
        ],
        bpNumber: 4711,
      }
    ];
    return {paymentDetailsDB};
  }
}

valid javascript code == valid typescript code. Check this out: stackoverflow.com/questions/966225/… — Dylan Meeus
– Dylan Meeus, Commented Aug 18, 2016 at 12:04
Looking at your code I see the following: (1) your class definition says "I want my array to have properties" but (2) your code that populates paymentDetailsDB declares that "each array item has child arrays". JS does not allow #1 but #2 is perfectly valid (mxii wrote an example of #2 implementation below) — Volodymyr Usarskyy
– Volodymyr Usarskyy, Commented Aug 18, 2016 at 13:09

slaesh · Accepted Answer · 2016-08-18 12:20:29Z

4

Your definition should look like this:

anonymous type variant:

export class PaymentDetails {
  accounts:
  {
    debitAccounts:
    {
      debitAccountId: string;
      debitBankCode: string;
      debitBankName: string;
      debitCountryCode: string;
      debitAccountNumber: string;
      debitAccountHolder: string;
      debitContinous: string;
      debitDueDate: string;
      iban: string;
      bic: string;
    }[],

    ccAccounts:
    {
      ccAccountId: string;
      ccCompanyCode: string;
      ccNumber: string;
      ccStart: string;
      ccExpiry: string;
      ccDsbTransactionId: string;
      ccCardholderName: string
    }[],

    bpNumber: number;
  };
}

named types (you should use this! :])

export class DebitAccount {
  Id: string;
  BankCode: string;
  BankName: string;
  CountryCode: string;
  Number: string;
  Holder: string;
  Continous: string;
  DueDate: string;
  iban: string;
  bic: string;
}

export class CcAccount {
  Id: string;
  CompanyCode: string;
  Number: string;
  Start: string;
  Expiry: string;
  DsbTransactionId: string;
  CardholderName: string
}

export class Account {
  debitAccounts: DebitAccount[];
  ccAccounts: CcAccount[];
  bpNumber: number;
}

export class PaymentDetails {
  account: Account[];
}

edited Aug 18, 2016 at 12:20

answered Aug 18, 2016 at 12:13

slaesh

17k6 gold badges53 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

weggi_swa Over a year ago

seems that the end result is the same (or at least the json scructure is the same when I display it in the console). However this is way more elegant and easier to understand. Turned out, my initial Problem was that i was accessing the arrays and objects inside wrongly...this post helped a lot with that stackoverflow.com/questions/11922383/…

Rahul Verma Over a year ago

@mxii sorry for asking a question in comment box, bcoz i am ban to ask question on this plateform. how can i access this array variables

[Array(2)] 0: Array(2) 0: {id: 5, name: "Eternis", …} 1: {id: 4, name: "Sprenza", …} length: 2 __proto__: Array(0) length: 1 __proto__: Array(0)

. i am trying this way *ngFor="let item of bookedItems" . but i failed any suggestion?

Fabien · Accepted Answer · 2017-07-14 02:51:02Z

1

Nested array could be defined as the following:

  items = [
     {name:'xyz', subMenuItem:[{name:'abc'}, {name:'cde'}], icon:'home'},
     {name:'pqr', subMenuItem:[{name:'abc'}, {name:'cde'}], icon:'home'},
    ];

edited Jul 14, 2017 at 2:51

Fabien

4,9502 gold badges21 silver badges33 bronze badges

answered Jul 13, 2017 at 18:49

mohit uprim

5,3522 gold badges26 silver badges28 bronze badges

Collectives™ on Stack Overflow

Define arrays within array in Angular 2 and Typescript

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related