Getting a JSON value and saving it to a variable in Angular 4

Question

Getting a JSON value and saving it to a variable in Angular 4

Here is the JSON structure:

{
  "Semester": [
    {
      "queueName": "Science",
      "totalCount": 300,
      "unassignedCount": 10,
      "subjectDetails": [
        {
          "subjectName": "Chemistry",
          "sectionOne": 100,
          "sectionTwo": 50,
          "onTrackTradeCount": 150
        },
        {
          "subjectName": "Biology",
          "sectionOne": 100,
          "sectionTwo": 50,
          "sectionThree": 150
        }
      ]
    },
    {
      "queueName": "Arts",
      "totalCount": 300,
      "unassignedCount": 10,
      "subjectDetails": [
        {
          "subjectName": "Indexing",
          "sectionOne": 100,
          "sectionTwo": 50,
          "sectionThree": 150
        }
      ]
    },
    {
      "queueName": "Humanity",
      "totalCount": 300,
      "unassignedCount": 10,
      "subjectDetails": [
        {
          "subjectName": "Indexing",
          "sectionOne": 100,
          "sectionTwo": 50,
          "sectionThree": 150
        }
      ]
    }
  ]
}

The Semester values are displayed in a multi-select dropdown using matSelect from Angular Material. When someone selects a particular semester, the corresponding subjectName should be displayed in another dropdown.

I am struggling with implementing this functionality, any help would be appreciated.

angular typescript

Answer 1

Answer №1

It seems like you are looking to implement a dropdown feature for semester items and then another dropdown for subjects based on the selection from the first dropdown.

To achieve this in your *.component.html file:

<mat-form-field>
 <mat-select placeholder="Semester" [(value)]="chosenSub">
  <mat-option *ngFor="let sem of Semester" [value]="sem.subjectDetails">
   {{ sem.queueName }}
  </mat-option>
 </mat-select>
</mat-form-field>
 <br>
<mat-form-field>
 <mat-select placeholder="Subject">
  <mat-option *ngFor="let sub of chosenSub" [value]="sub.subjectName" >
   {{ sub.subjectName }}
  </mat-option>
 </mat-select>
</mat-form-field>

In your *.component.ts file:

chosenSub = '';

You can view a live demo of this implementation on StackBlitz.

Here is an illustration of how it works: https://i.sstatic.net/ZopfX.png

Answer 2

It seems like you are looking to implement a dropdown feature for semester items and then another dropdown for subjects based on the selection from the first dropdown.

To achieve this in your *.component.html file:

<mat-form-field>
 <mat-select placeholder="Semester" [(value)]="chosenSub">
  <mat-option *ngFor="let sem of Semester" [value]="sem.subjectDetails">
   {{ sem.queueName }}
  </mat-option>
 </mat-select>
</mat-form-field>
 <br>
<mat-form-field>
 <mat-select placeholder="Subject">
  <mat-option *ngFor="let sub of chosenSub" [value]="sub.subjectName" >
   {{ sub.subjectName }}
  </mat-option>
 </mat-select>
</mat-form-field>

In your *.component.ts file:

chosenSub = '';

You can view a live demo of this implementation on StackBlitz.

Here is an illustration of how it works: https://i.sstatic.net/ZopfX.png

Answer 3

Answer №2

If I understand correctly, you will need to utilize something similar to the code snippet below for your template:

<mat-form-field>
<mat-select>
  <mat-option *ngFor="let sem of Semester" [value]="sem.queueName" formControlName="firstDropdown">
    {{ sem.queueName }}
  </mat-option>
</mat-select>
<mat-select>
  <mat-option *ngFor="let sub of selectedSemester.subjectDetails">
    {{ sub.subjectName }}
  </mat-option>
</mat-select>
</mat-form-field>

In the corresponding typescript file, you can bind the two together so that selectedSemester is set to Semester[0] initially and updates when the value in the first dropdown changes. You may prefer using a class-based form and subscribing to the change observable to update the selectedSemester. Here's an example of how it could be done:

ngOnInit() {
  this.selectedSemester = this.Semester[0]
  this.myForm.valueChanges.subscribe(
    data => { 
       const temp = this.myForm.get('firstDropdown').value
       this.selectedSemester = this.Semester.find(
         el => el.queueName === temp
       )
     }
  )

I hope this provides some guidance, but the specific implementation will vary based on your application.

Best of luck!

Answer 4

If I understand correctly, you will need to utilize something similar to the code snippet below for your template:

<mat-form-field>
<mat-select>
  <mat-option *ngFor="let sem of Semester" [value]="sem.queueName" formControlName="firstDropdown">
    {{ sem.queueName }}
  </mat-option>
</mat-select>
<mat-select>
  <mat-option *ngFor="let sub of selectedSemester.subjectDetails">
    {{ sub.subjectName }}
  </mat-option>
</mat-select>
</mat-form-field>

In the corresponding typescript file, you can bind the two together so that selectedSemester is set to Semester[0] initially and updates when the value in the first dropdown changes. You may prefer using a class-based form and subscribing to the change observable to update the selectedSemester. Here's an example of how it could be done:

ngOnInit() {
  this.selectedSemester = this.Semester[0]
  this.myForm.valueChanges.subscribe(
    data => { 
       const temp = this.myForm.get('firstDropdown').value
       this.selectedSemester = this.Semester.find(
         el => el.queueName === temp
       )
     }
  )

I hope this provides some guidance, but the specific implementation will vary based on your application.

Best of luck!

Answer 5

Answer №3

In the component, you can set up your form like this:

 public form: FormGroup = new FormGroup({
    semester: new FormControl(''),
 });

To populate a dropdown with mat-select options based on the selected value from another dropdown, use an Array Object for semester.subjectDetails.

 <mat-select formControlName="semester" required placeholder="Semester">
            <mat-option *ngFor="let semester of JsonSemester"
                        [value]="semester.subjectDetails">
              {{ semester.queueName}}
            </mat-option>
    </mat-select>

Answer 6

In the component, you can set up your form like this:

 public form: FormGroup = new FormGroup({
    semester: new FormControl(''),
 });

To populate a dropdown with mat-select options based on the selected value from another dropdown, use an Array Object for semester.subjectDetails.

 <mat-select formControlName="semester" required placeholder="Semester">
            <mat-option *ngFor="let semester of JsonSemester"
                        [value]="semester.subjectDetails">
              {{ semester.queueName}}
            </mat-option>
    </mat-select>

Getting a JSON value and saving it to a variable in Angular 4

Answer №1

Answer №2

Answer №3

Similar questions

Is there a way to verify whether a key within an Interface corresponds to a class that is a subclass of a specific Parent

What steps should I take to resolve issues with importing Angular modules?

Unable to find Angular 6 Universal Application code in the view source

Issue with IN operator functionality in TypeORM when used with MongoDB

What is the best way to retrieve specific data based on their unique identifier?

Exploring the potential of AssemblyScript in creating immersive WebXR

Designate as a customizable class property

Utilizing Angular to Handle Multiple Sockets on a Single Client

Angular 5's external JavaScript library

Challenges arise when attempting to break down an API into separate components rather than consolidating it into a

Is it recommended for TypeScript to automatically resolve the index.ts file as the default module file?

Angular 2 orderByPipe not displaying any results initially

Displaying errors to the user using Angular's HttpClient in an Ionic application

Angular Reactive Forms - Adding Values Dynamically

Error in Template Syntax for External Pug Templates: Component template must have a root element, not just plain text

Tips for deleting on a numeric cell within ag-grid?

Updating the FormControl value using the ControlValueAccessor

Analyzing a Typescript project using SonarQube Scanner on a Mac OS slave in Jenkins: A step-by-step guide

Issues encountered while attempting to convert HTML Image and Canvas Tags to PDF within Angular 2

Updating a data attribute in Angular 2: A different approach