How to get the array using a dynamic key in *ngFor : Angular 2+

Question

This is my object:

dynamicData = 
    {
       uni_id:{options: [1,2,3,4]},
    }

I want to use ngfor loop like this:

<option *ngFor="let opt of dynamicData.uni_id.options" value="{{opt.value}}">{{ opt.label }}</option>

The problem is : uni_id is dynamic and is available at run time. uni_id key itself is dynamic. it can be uni_id5, uni_id7 anything coming from db How can i use it in the template

Answer 1

You can use keyvalue pipe to dynamically loop through object properties.

Try like this:

  <ng-container *ngFor="let opt of dynamicData | keyvalue">
    <option  *ngFor=" let item of dynamicData[opt.key].options" value="{{item}}">{{item }}</option>
  </ng-container>

Working Demo

Answer 2

please use it like this

<option *ngFor="let opt of dynamicData.uni_id?.options" value="{{opt.value}}">{{ opt.label }}</option>

this way you can check if data is there in uni_id then only show

if you are getting dynamic value for uni_id then

in ts file

let uniqueId = Object.keys(this.dynamicData).filter(key => key.startsWith('uni_id'))[0]
list = this.dynamicData.uniqueId

in html file

 <option *ngFor="let opt of list.options" value="{{opt.value}}">{{ opt.label }}</option>