How to populate nested json data to angular material drop down list

Question

This is Json Data........ I have to print difficultyLevel

I tried multiple times but thats not working. what changes are required in html file

const ELEMENT_DATA: data = {
      questions: [
        {
          difficultyLevel: 'esay',
          isOptionAvailable: true,
          isImageAvailable: false,
          imageUrl: '',
          questionType: 'e',
          maximumMarks: 20,
          timeToSolve: 12,
          questionId: 2,
          topicName: 'xs',
          classInfo: {
            classId: 10,
            className: '6',
          },
          subjectInfo: {
            subjectName: 'English',
            subjectId: 3,
          },

Interface

  interface data {
  questions: Question[];
  message: string;
  status: string;
}

interface Question {
  difficultyLevel: string;
  isOptionAvailable: boolean;
  isImageAvailable: boolean;
  imageUrl?: string;
  questionType: string;
  maximumMarks?: number;
  timeToSolve: number;
  questionId: number;
  topicName: string;
  classInfo: ClassInfo;
  subjectInfo: SubjectInfo;
  boardInfo: BoardInfo;
  images: any[];
  options: Option[];
}

What I'm trying:

    <mat-form-field class="drop-down" appearance="fill">
              <mat-label>--Difficulty Level--</mat-label>
              <mat-select [(ngModel)]="selectedValue" name="food">
                <mat-option *ngFor="let diff of  " [value]="diff.questionId">
                  {{ diff.difficultyLevel }}
                </mat-option>
              </mat-select>
            </mat-form-field>

But this is not working... How to write in mat-option

surendra kumar · Accepted Answer · 2020-07-17 03:49:25Z

1

Use the below code to iterate.

<mat-form-field class="drop-down" appearance="fill">
              <mat-label>--Difficulty Level--</mat-label>
              <mat-select [(ngModel)]="selectedValue" name="food">
                <mat-option *ngFor="let diff of  ELEMENT_DATA.questions" [value]="diff.questionId">
                  {{ diff.difficultyLevel }}
                </mat-option>
              </mat-select>
            </mat-form-field>

answered Jul 17, 2020 at 3:49

surendra kumar

1,78012 silver badges15 bronze badges

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

1 Comment

surendra kumar Over a year ago

Please accept and upvote the answer if this works for you

Collectives™ on Stack Overflow

How to populate nested json data to angular material drop down list

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related