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

Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/185837/discussion-between-prashant-pimpale-and-just-teach-me). — Prashant Pimpale, Dec 27 '18 at 14:20
@PrashantPimpale how to reset drop down if i select in between values bcz ngModel hold its value! — , Jan 05 '19 at 08:39

score 1 · Accepted Answer · answered Dec 26 '18 at 13:32

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.

Yes its working ! but this json data coming from API and i stored in this.response how to use this.response in HTML? — , Dec 26 '18 at 13:50
level 1 to level 2 ngModel contains value in array but i want in ngModel value that should be what i select in ng model — , Dec 27 '18 at 10:53
this is working fine but it contained enter and white spaces that is \t \n !how to resolve — , Jan 04 '19 at 07:52
Just [replace them using String's `replace` method](https://stackoverflow.com/a/9018110/2622292). — SiddAjmera, Jan 04 '19 at 08:04
level1: "Dongle ↵ " level2: "Lifetime Extension ↵ " level3: "Loyalty (Increase Satisfaction) ↵ " level4: "Tariff Perception ↵ " level5: "Low Value ↵ " this is my json look like — , Jan 04 '19 at 08:09
how to reset values if i select 1 2 drop down bcoz ng model hold values! — , Jan 05 '19 at 08:38

Display json Object Data into Drop down list angular 2?

1 Answers1