Display json Object Data into Drop down list angular 2?

Question

HTML

              <!-- level One  Offer for Drop Down -->
              <div class="row no-overflow">
                <div class="col-md-1 window-pad-height no-overflow">
                  <mat-label> Level 1: </mat-label>
                </div>
                <div class="col-md-2 no-overflow">
                  <mat-form-field class="no-overflow">
                    <mat-select placeholder="select" [(ngModel)]="selectedOfferOne">
                      <mat-option *ngFor="" [value]="levelone">
                        

                      </mat-option>
                    </mat-select>
                  </mat-form-field>
                </div>
              </div>

              <!-- level Two  Offer for Drop Down -->
              <div class="row no-overflow">
                <div class="col-md-1  no-overflow">
                  <mat-label> Level 2: </mat-label>
                </div>
                <div class="col-md-2 no-overflow">
                  <mat-form-field class="no-overflow">
                    <mat-select placeholder="select" [(ngModel)]="selectedOfferTwo">
                      <mat-option *ngFor="" [value]="leveltwo">
                        
                      </mat-option>
                    </mat-select>
                  </mat-form-field>
                </div>
              </div>

              <!-- level Three Offer for Drop Down -->
              <div class="row no-overflow">
                <div class="col-md-1 no-overflow">
                  <mat-label> Level 3: </mat-label>
                </div>
                <div class="col-md-2 no-overflow">
                  <mat-form-field class="no-overflow">
                    <mat-select placeholder="select" [(ngModel)]="selectedOfferThree">
                      <mat-option *ngFor="" [value]="levelthree">
                        
                      </mat-option>
                    </mat-select>
                  </mat-form-field>
                </div>
              </div>


              <!-- level Four Offer for Drop Down -->
              <div class="row no-overflow">
                <div class="col-md-1 no-overflow">
                  <mat-label> Level 4: </mat-label>
                </div>
                <div class="col-md-2 no-overflow">
                  <mat-form-field class="no-overflow">
                    <mat-select placeholder="select" [(ngModel)]="selectedOfferFour">
                      <mat-option *ngFor="" [value]="levelfour">
                        
                      </mat-option>
                    </mat-select>
                  </mat-form-field>
                </div>
              </div>

              <!-- level Five Offer for Drop Down -->
              <div class="row no-overflow">
                <div class="col-md-1 no-overflow">
                  <mat-label> Level 5: </mat-label>
                </div>
                <div class="col-md-2 no-overflow">
                  <mat-form-field class="no-overflow">
                    <mat-select placeholder="select" [(ngModel)]="selectedOfferFive">
                      <mat-option *ngFor="" [value]="levelfive">
                        
                      </mat-option>
                    </mat-select>
                  </mat-form-field>
                </div>
              </div>

JSON

LevelValue: any= 
  {
    "level1": [{
            "level1Name": "Prepaid",
            "level2": [ {
                    "level2Name": "data",
                    "level3": [ {
                            "level3Name": "getCustomer",
                            "level4": [{
                                    "level4Name": "Prepaid",
                                    "level5": [
                                        "1",
                                        "2",
                                        "3"
                                    ]
                                }, {
                                    "level4Name": "Postpaid",
                                    "level5": [
                                        "4",
                                        "5",
                                        "6"
                                    ]
                                }
                            ]
                        }
                    ]
                }
            ]
        }
    ]
}

level1Name should be display in level one drop down

level2Name should be display in level two drop down

level3Name should be display in level three drop down

level4Name should be display in level four drop down as per the level 4 selection values should get change in level 5 drop down this json data is coming from the API My StackBlitz Link -- > https://stackblitz.com/edit/angular-cztf8k

Thanks in advance

Answer 1

Just use LevelValue.level1 in first *ngFor and then [(ngModel)] property of that in the subsequent *ngFor. Also set the [value] to level for each mat-option

Give this a try:

<!-- level One  Offer for Drop Down -->
<div class="row no-overflow">
  <div class="col-md-1 window-pad-height no-overflow">
    <mat-label> Level 1: </mat-label>
  </div>
  <div class="col-md-2 no-overflow">
    <mat-form-field class="no-overflow">
      <mat-select placeholder="select" [(ngModel)]="selectedOfferOne">
        <mat-option *ngFor="let level of LevelValue.level1" [value]="level">
          {{level.level1Name}}
        </mat-option>
      </mat-select>
    </mat-form-field>
  </div>
</div>

<!-- level Two  Offer for Drop Down -->
<div class="row no-overflow">
  <div class="col-md-1  no-overflow">
    <mat-label> Level 2: </mat-label>
  </div>
  <div class="col-md-2 no-overflow">
    <mat-form-field class="no-overflow">
      <mat-select placeholder="select" [(ngModel)]="selectedOfferTwo">
        <mat-option *ngFor="let level of selectedOfferOne.level2" [value]="level">
          {{level.level2Name}}
        </mat-option>
      </mat-select>
    </mat-form-field>
  </div>
</div>

<!-- level Three Offer for Drop Down -->
<div class="row no-overflow">
  <div class="col-md-1 no-overflow">
    <mat-label> Level 3: </mat-label>
  </div>
  <div class="col-md-2 no-overflow">
    <mat-form-field class="no-overflow">
      <mat-select placeholder="select" [(ngModel)]="selectedOfferThree">
        <mat-option *ngFor="let level of selectedOfferTwo.level3" [value]="level">
          {{level.level3Name}}
        </mat-option>
      </mat-select>
    </mat-form-field>
  </div>
</div>


<!-- level Four Offer for Drop Down -->
<div class="row no-overflow">
  <div class="col-md-1 no-overflow">
    <mat-label> Level 4: </mat-label>
  </div>
  <div class="col-md-2 no-overflow">
    <mat-form-field class="no-overflow">
      <mat-select placeholder="select" [(ngModel)]="selectedOfferFour">
        <mat-option *ngFor="let level of selectedOfferThree.level4" [value]="level">
          {{level.level4Name}}
        </mat-option>
      </mat-select>
    </mat-form-field>
  </div>
</div>

<!-- level Five Offer for Drop Down -->
<div class="row no-overflow">
  <div class="col-md-1 no-overflow">
    <mat-label> Level 5: </mat-label>
  </div>
  <div class="col-md-2 no-overflow">
    <mat-form-field class="no-overflow">
      <mat-select placeholder="select" [(ngModel)]="selectedOfferFive">
        <mat-option *ngFor="let level of selectedOfferFour.level5" [value]="level">
          {{ level }}
        </mat-option>
      </mat-select>
    </mat-form-field>
  </div>
</div>

Here's a Working Sample StackBlitz for your ref.