Iterate Array Inside of Array Angular 4

Question

How can i iterate these arrays inside of arrays in select option in angular 4? I have this codes below. The problem that it produces several select option instead of a single select option. I want to iterate the acct_type_name only. How can i solve this? Thankssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss

TS

<ng-container *ngFor="let account of accounts">
                      <select type="text" class="form-control">
                        <option *ngFor="let accountss of account.account_types">{{ accountss.acct_type_name }}</option>
                      </select>
                    </ng-container>

JSON

[
  {
    "account_type_cla_id": 1,
    "account_type_cla_name": "Assets",
    "created_at": null,
    "updated_at": null,
    "account_types": [
      {
        "acc_type_id": 1,
        "acc_type_cla_id": 1,
        "acct_type_name": "Other Asset",
        "acct_type_description": "Other Asset",
        "created_at": null,
        "updated_at": null
      },
      {
        "acc_type_id": 2,
        "acc_type_cla_id": 1,
        "acct_type_name": "Other Current Asset",
        "acct_type_description": "Other Current Asset",
        "created_at": null,
        "updated_at": null
      },
      {
        "acc_type_id": 3,
        "acc_type_cla_id": 1,
        "acct_type_name": "Cash",
        "acct_type_description": "Cash",
        "created_at": null,
        "updated_at": null
      },
      {
        "acc_type_id": 4,
        "acc_type_cla_id": 1,
        "acct_type_name": "Bank",
        "acct_type_description": "Bank",
        "created_at": null,
        "updated_at": null
      },
      {
        "acc_type_id": 5,
        "acc_type_cla_id": 1,
        "acct_type_name": "Fixed Asset",
        "acct_type_description": "Fixed Asset",
        "created_at": null,
        "updated_at": null
      },
      {
        "acc_type_id": 6,
        "acc_type_cla_id": 1,
        "acct_type_name": "Stock",
        "acct_type_description": "Stock",
        "created_at": null,
        "updated_at": null
      }
    ]
  },
  {
    "account_type_cla_id": 2,
    "account_type_cla_name": "Liability",
    "created_at": null,
    "updated_at": null,
    "account_types": [
      {
        "acc_type_id": 7,
        "acc_type_cla_id": 2,
        "acct_type_name": "Other Current Liability",
        "acct_type_description": "Other Current Liability",
        "created_at": null,
        "updated_at": null
      },
      {
        "acc_type_id": 8,
        "acc_type_cla_id": 2,
        "acct_type_name": "Credit Card",
        "acct_type_description": "Credit Card",
        "created_at": null,
        "updated_at": null
      },
      {
        "acc_type_id": 9,
        "acc_type_cla_id": 2,
        "acct_type_name": "Long Term Liability",
        "acct_type_description": "Long Term Liability",
        "created_at": null,
        "updated_at": null
      }
    ]
  },
  {
    "account_type_cla_id": 3,
    "account_type_cla_name": "Equity",
    "created_at": null,
    "updated_at": null,
    "account_types": [
      {
        "acc_type_id": 10,
        "acc_type_cla_id": 3,
        "acct_type_name": "Equity",
        "acct_type_description": "Equity",
        "created_at": null,
        "updated_at": null
      }
    ]
  },
]

Do you want a single dropdown to show all the options? Currently it shows correctly the way you template it. — Ashraful Islam
– Ashraful Islam, Commented Jan 16, 2018 at 3:39
@AshrafulIslam. Yes i want to iterate acct_type_name from three different accounts. — Joseph
– Joseph, Commented Jan 16, 2018 at 3:49

Ashraful Islam · Accepted Answer · 2018-01-16 03:49:31Z

2

Template file

<ng-container>
    <select type="text" class="form-control">
    <option *ngFor="let acct_type_name of getAcctTypeName()">{{ acct_type_name }}</option>
  </select>
</ng-container>

If your sample data is in accounts property add this in typescript file

getAcctTypeName(){
  let accountTypeName:string[]=[];
  this.accounts.forEach(account=>{
    account.account_types.forEach(accountTypeItem=>{
      accountTypeName.push(accountTypeItem.acct_type_name); 
    });
  });
  return accountTypeName;
}

answered Jan 16, 2018 at 3:49

Ashraful Islam

1,26311 silver badges15 bronze badges

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

1 Comment

user7426734 Over a year ago

its better to close the duplicate questions rather than posting answer

Vivek Doshi · Accepted Answer · 2018-01-16 03:54:20Z

1

You just need to take ng-container inside of select tag

<select type="text" class="form-control">
    <ng-container *ngFor="let account of accounts">
        <option *ngFor="let accountss of account.account_types">{{ accountss.acct_type_name }}</option>
    </ng-container>
</select>

answered Jan 16, 2018 at 3:54

Vivek Doshi

58.8k12 gold badges120 silver badges126 bronze badges

4 Comments

user7426734 Over a year ago

its better to close the duplicate questions rather than posting answer

Vivek Doshi Over a year ago

@faceturn, usser already knows how to Iterate Array Inside of Array Angular 4 , question tag line is wrong , and OP is not clear about the logic , as you can see in the code he has already implemented it , but dont know where to.

Joseph Over a year ago

@VivekDoshi. Thanks. Did you solve my pagination problem yesterday?

Vivek Doshi Over a year ago

I need some working example for that, will you please create one on stackblitz.com ?

Collectives™ on Stack Overflow

Iterate Array Inside of Array Angular 4

2 Answers 2

1 Comment

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related