Guide to sorting through intricate structured Json information within Angular 6

Question

Guide to sorting through intricate structured Json information within Angular 6

I'm working on an Angular 6 App that involves handling complex structured JSON data with advanced filtering requirements.

JSON Data:

[{
    "StudentId": 1,
    "StudentName": "Student1",
    "Sex":"M",
    "Programs": [
        {
            "StudentId": 1,
            "ProgramName": "Java",
            "ProgramCategory": "Engineering",
            "ProgramStatus": "Full Time"
        },
        {
            "StudentId": 1,
            "ProgramName": "HR Management 2",
            "ProgramCategory": "HR",
            "ProgramStatus": "Part Time"
        },
        {
            "StudentId": 1,
            "ProgramName": "Accounting 1",
            "ProgramCategory": "Finance",
            "ProgramStatus": "Full Time"
        }
    ]
 },
...

Filter Options:

To achieve the desired results, I need to create 3 drop-down lists in my HTML page for filtering by:

... ... ...

Help:

I've been struggling to get the exact output I need. Any suggestions or modifications to my current code are greatly appreciated!

Thank you in advance!

json angular typescript

Answer 1

Answer №1

Here is a solution I have that utilizes reactive forms and rxjs BehaviorSubjects:

Check out the full solution here

The core of the filtering problem you were facing can be found in this code snippet:

private setFilters() {
  // Implementation details...
}

Filtering for both ProgramCategory and ProgramStatus together requires a different approach compared to filtering them separately. In the provided stack blitz example, the filters are grouped into a FormGroup to achieve the desired behavior.

If you're interested, consider switching your table implementation to utilize @angular/cdk/table. This aligns well with the rxjs-centric method used in this solution and could enhance your application, especially if you appreciate this approach.

Answer 2

Here is a solution I have that utilizes reactive forms and rxjs BehaviorSubjects:

Check out the full solution here

The core of the filtering problem you were facing can be found in this code snippet:

private setFilters() {
  // Implementation details...
}

Filtering for both ProgramCategory and ProgramStatus together requires a different approach compared to filtering them separately. In the provided stack blitz example, the filters are grouped into a FormGroup to achieve the desired behavior.

If you're interested, consider switching your table implementation to utilize @angular/cdk/table. This aligns well with the rxjs-centric method used in this solution and could enhance your application, especially if you appreciate this approach.

Answer 3

Answer №2

Customize your filters then execute the provided function with the corresponding values.

const individuals = [{
  "PersonId": 1,
  "Name": "Person1",
  "Gender": "Male",
  "Courses": [
    {
      "StudentId": 1,
      "CourseName": "Java",
      "CourseCategory": "Engineering",
      "CourseStatus": "Full Time"
    },
    {
      "StudentId": 1,
      "CourseName": "HR Management 2",
      "CourseCategory": "HR",
      "CourseStatus": "Part Time"
    },
    {
      "StudentId": 1,
      "CourseName": "Accounting 1",
      "CourseCategory": "Finance",
      "CourseStatus": "Full Time"
    }
  ]
},
{
  "PersonId": 2,
  "Name": "Person2",
  "Gender": "Female",
  "Courses": [
    {
      "StudentId": 2,
      "CourseName": "HR Management 1",
      "CourseCategory": "HR",
      "CourseStatus": "Part Time"
    },
    {
      "StudentId": 2,
      "CourseName": "Accounting 3",
      "CourseCategory": "Finance",
      "CourseStatus": "Full Time"
    }
  ]
},
{
  "PersonId": 3,
  "Name": "Person3",
  "Gender": "Female",
  "Courses": [
    {
      "StudentId": 3,
      "CourseName": "Java 3",
      "CourseCategory": "Engineering",
      "CourseStatus": "Full Time"
    }
  ]
},
{
  "PersonId": 4,
  "Name": "Person4",
  "Gender": "Male",
  "Courses": [
    {
      "StudentId": 4,
      "CourseName": "Java 2",
      "CourseCategory": "Engineering",
      "CourseStatus": "Full Time"
    },
    {
      "StudentId": 4,
      "CourseName": "Accounting 2",
      "CourseCategory": "Finance",
      "CourseStatus": "Part Time"
    }
  ]
},
{
  "PersonId": 5,
  "Name": "Person5",
  "Gender": "Male",
  "Courses": [
    {
      "StudentId": 5,
      "CourseName": "JavaScript",
      "CourseCategory": "Engineering",
      "CourseStatus": "Part Time"
    },
    {
      "StudentId": 5,
      "CourseName": "HR Management 5",
      "CourseCategory": "HR",
      "CourseStatus": "Full Time"
    }
  ]
}];

const filterSelectedStudents = (students, gender, category, status) => {
  const filteredStudents = students.filter(student => {
    // compare students to selected gender
    if (gender && student.gender !== gender) {
      return false;
    }

    // check if a student has the selected category
    if (category) {
      const hasCategory = student.Courses.find(course => course.CourseCategory === category);
      if (!hasCategory) {
        return false;
      }
    }

    // check if a student has the selected status
    if (status) {
      const hasStatus = student.Courses.find(course => course.CourseStatus === status);
      if (!hasStatus) {
        return false;
      }
    }

    return true;
  });

  return filteredStudents;
};

const chosenStudents = filterSelectedStudents(individuals, null, 'HR', 'Part Time');

chosenStudents.forEach(student => {
  console.log(student);
})

Answer 4

Customize your filters then execute the provided function with the corresponding values.

const individuals = [{
  "PersonId": 1,
  "Name": "Person1",
  "Gender": "Male",
  "Courses": [
    {
      "StudentId": 1,
      "CourseName": "Java",
      "CourseCategory": "Engineering",
      "CourseStatus": "Full Time"
    },
    {
      "StudentId": 1,
      "CourseName": "HR Management 2",
      "CourseCategory": "HR",
      "CourseStatus": "Part Time"
    },
    {
      "StudentId": 1,
      "CourseName": "Accounting 1",
      "CourseCategory": "Finance",
      "CourseStatus": "Full Time"
    }
  ]
},
{
  "PersonId": 2,
  "Name": "Person2",
  "Gender": "Female",
  "Courses": [
    {
      "StudentId": 2,
      "CourseName": "HR Management 1",
      "CourseCategory": "HR",
      "CourseStatus": "Part Time"
    },
    {
      "StudentId": 2,
      "CourseName": "Accounting 3",
      "CourseCategory": "Finance",
      "CourseStatus": "Full Time"
    }
  ]
},
{
  "PersonId": 3,
  "Name": "Person3",
  "Gender": "Female",
  "Courses": [
    {
      "StudentId": 3,
      "CourseName": "Java 3",
      "CourseCategory": "Engineering",
      "CourseStatus": "Full Time"
    }
  ]
},
{
  "PersonId": 4,
  "Name": "Person4",
  "Gender": "Male",
  "Courses": [
    {
      "StudentId": 4,
      "CourseName": "Java 2",
      "CourseCategory": "Engineering",
      "CourseStatus": "Full Time"
    },
    {
      "StudentId": 4,
      "CourseName": "Accounting 2",
      "CourseCategory": "Finance",
      "CourseStatus": "Part Time"
    }
  ]
},
{
  "PersonId": 5,
  "Name": "Person5",
  "Gender": "Male",
  "Courses": [
    {
      "StudentId": 5,
      "CourseName": "JavaScript",
      "CourseCategory": "Engineering",
      "CourseStatus": "Part Time"
    },
    {
      "StudentId": 5,
      "CourseName": "HR Management 5",
      "CourseCategory": "HR",
      "CourseStatus": "Full Time"
    }
  ]
}];

const filterSelectedStudents = (students, gender, category, status) => {
  const filteredStudents = students.filter(student => {
    // compare students to selected gender
    if (gender && student.gender !== gender) {
      return false;
    }

    // check if a student has the selected category
    if (category) {
      const hasCategory = student.Courses.find(course => course.CourseCategory === category);
      if (!hasCategory) {
        return false;
      }
    }

    // check if a student has the selected status
    if (status) {
      const hasStatus = student.Courses.find(course => course.CourseStatus === status);
      if (!hasStatus) {
        return false;
      }
    }

    return true;
  });

  return filteredStudents;
};

const chosenStudents = filterSelectedStudents(individuals, null, 'HR', 'Part Time');

chosenStudents.forEach(student => {
  console.log(student);
})

Answer 5

Answer №3

Since the key of this.filters[property] is constantly Programs, it leads to consistently overwriting the previous selection. Consequently, only the latest of the 2 sub-filters will be applied.

To address this issue, it is recommended to first check if a filter is already defined for this.filters[property]. If it is, ensure that it is also validated.

You can update your filterMatchSub method in the following way:

 filterMatchSub(property: string, childProperty: string, value: any) {
    let existing = (val) => true; // Create a function that always returns true
    // Store a reference to the existing filter if one is already defined
    if (this.filters[property]) {
      existing = this.filters[property];
    }

    // Invoke the existing function as well
    this.filters[property] = val => val.find( child => child[childProperty]  === value) && existing(val);
    this.setFilters();
  }

Feel free to explore a demo on StackBlitz here

Answer 6

Since the key of this.filters[property] is constantly Programs, it leads to consistently overwriting the previous selection. Consequently, only the latest of the 2 sub-filters will be applied.

To address this issue, it is recommended to first check if a filter is already defined for this.filters[property]. If it is, ensure that it is also validated.

You can update your filterMatchSub method in the following way:

 filterMatchSub(property: string, childProperty: string, value: any) {
    let existing = (val) => true; // Create a function that always returns true
    // Store a reference to the existing filter if one is already defined
    if (this.filters[property]) {
      existing = this.filters[property];
    }

    // Invoke the existing function as well
    this.filters[property] = val => val.find( child => child[childProperty]  === value) && existing(val);
    this.setFilters();
  }

Feel free to explore a demo on StackBlitz here

Answer 7

Answer №4

My detailed perspective on the handling of this issue can be found here with a complete example on stackblitz.

Module:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

import { AppComponent } from './app.component';

@NgModule({
  imports: [BrowserModule, FormsModule, ReactiveFormsModule],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule { }

Component:

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';
import { STUDENTS } from './students';

interface FilterFormValue {
  sex: string;
  category: string;
  status: string;
}

interface Program {
  studentId: number;
  programName: string;
  programCategory: string;
  programStatus: string;
}

export interface Student {
  studentId: number;
  studentName: string;
  sex: string;
  programs: Array<Program>;
}

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {

  students: Array<Student> = [];
  filteredStudents: Array<Student> = [];

  sexOptions: Array<string> = [];
  programCategoryOptions: Array<string> = [];
  programStatusOptions: Array<string> = [];

  filterForm: FormGroup;

  constructor(private formBuilder: FormBuilder) { }

  ngOnInit() {
    this.getStudents();
  }

  private getStudents() {
    // Content of this method is simulated data initialization for demonstration purposes.
    // In real scenario, students data would be fetched from an API.
    
    this.students = STUDENTS;
    this.filteredStudents = this.students;
    
    this.getSexOptions();
    this.getProgramCategoryOptions();
    this.getProgramStatusOptions();

    this.initFilterForm();
  }

  // Other methods and functionalities as described in the original code remain unchanged.

}

HTML:

<div class="row">
  <div class="col-sm-12">
    <div class="panel panel-sm ">
      <div class="panel-body">
        <h5>Basic Info</h5>
        <div class="hs-lead">

          <form [formGroup]="filterForm">

            <!-- Form content as per original code -->

          </form>

        </div>
      </div>
    </div>
  </div>
</div>
<div class="row">
  <div class="col-sm-12">
    <div class="panel panel-xl">
      <div class="panel-body">
        <h5>Result
          <span class="badge badge-info badge-pill pull-right">{{ filteredStudents.length }}</span>
        </h5>
        <div class="hs-lead">
          <div class="table-responsive">
            <table class="table table-hover">
              <thead>
                <tr>
                  <th>#</th>
                  <th>Name</th>
                  <th>Sex</th>
                  <th>Programs</th>
                </tr>
              </thead>
              <tbody>
                <tr *ngFor="let student of filteredStudents">
                  <td>{{ student.studentId }}</td>
                  <td>{{ student.studentName }}</td>
                  <td>{{ student.sex }}</td>
                  <td>
                    {{ student.programs.length }}
                    <ol *ngFor="let program of student.programs">
                      <li>{{ program.programCategory }} / {{ program.programStatus }}</li>
                    </ol>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 8

My detailed perspective on the handling of this issue can be found here with a complete example on stackblitz.

Module:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

import { AppComponent } from './app.component';

@NgModule({
  imports: [BrowserModule, FormsModule, ReactiveFormsModule],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule { }

Component:

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';
import { STUDENTS } from './students';

interface FilterFormValue {
  sex: string;
  category: string;
  status: string;
}

interface Program {
  studentId: number;
  programName: string;
  programCategory: string;
  programStatus: string;
}

export interface Student {
  studentId: number;
  studentName: string;
  sex: string;
  programs: Array<Program>;
}

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {

  students: Array<Student> = [];
  filteredStudents: Array<Student> = [];

  sexOptions: Array<string> = [];
  programCategoryOptions: Array<string> = [];
  programStatusOptions: Array<string> = [];

  filterForm: FormGroup;

  constructor(private formBuilder: FormBuilder) { }

  ngOnInit() {
    this.getStudents();
  }

  private getStudents() {
    // Content of this method is simulated data initialization for demonstration purposes.
    // In real scenario, students data would be fetched from an API.
    
    this.students = STUDENTS;
    this.filteredStudents = this.students;
    
    this.getSexOptions();
    this.getProgramCategoryOptions();
    this.getProgramStatusOptions();

    this.initFilterForm();
  }

  // Other methods and functionalities as described in the original code remain unchanged.

}

HTML:

<div class="row">
  <div class="col-sm-12">
    <div class="panel panel-sm ">
      <div class="panel-body">
        <h5>Basic Info</h5>
        <div class="hs-lead">

          <form [formGroup]="filterForm">

            <!-- Form content as per original code -->

          </form>

        </div>
      </div>
    </div>
  </div>
</div>
<div class="row">
  <div class="col-sm-12">
    <div class="panel panel-xl">
      <div class="panel-body">
        <h5>Result
          <span class="badge badge-info badge-pill pull-right">{{ filteredStudents.length }}</span>
        </h5>
        <div class="hs-lead">
          <div class="table-responsive">
            <table class="table table-hover">
              <thead>
                <tr>
                  <th>#</th>
                  <th>Name</th>
                  <th>Sex</th>
                  <th>Programs</th>
                </tr>
              </thead>
              <tbody>
                <tr *ngFor="let student of filteredStudents">
                  <td>{{ student.studentId }}</td>
                  <td>{{ student.studentName }}</td>
                  <td>{{ student.sex }}</td>
                  <td>
                    {{ student.programs.length }}
                    <ol *ngFor="let program of student.programs">
                      <li>{{ program.programCategory }} / {{ program.programStatus }}</li>
                    </ol>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Guide to sorting through intricate structured Json information within Angular 6

JSON Data:

Filter Options:

Help:

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

What is the best way to invoke a function in a React component from another component?

Troubleshooting problem with fullscreen mode in videojs on Ionic 2 due to StatusBar issue

Datatable - pagination - retrieving data from a specific page

best practices for filtering custom data returned from valuePreparefunction in ng2 smart table

Unable to load the default value for ion-select in TypeScript

In order to launch an Angular project

Differences Between APP_INITIALIZER and platformBrowserDynamic with provide

What is the best way to save a JSON stream to a file in Node.js?

Using TypeScript to create a unique object type that is mapped with generics for each key

What is the best way to import and export modules in Node.js when the module names and directories are given as strings?

When attempting to import a component from an external library in React/Next, you may run into an error that states: "Element type is invalid: Expected a string or

Creating sophisticated TypeScript AngularJS directive

Can we combine two arrays of objects based on their unique identifiers?

Using Angular CLI to enhance Angular 2 with Material Design elements

Regular Expressions: Strategies for ensuring a secure password that meets specific criteria

What is the best way to implement an Angular Guard that utilizes an API service for validation and redirects in case of failure?

Typescript: defining index signatures with numerical types in the range of 1 to 3

Tips for virtualizing the choices in React-Select?

Access information from government websites by filling out a form or connecting to their API

Parsing JSON with JsonConvert.DeserializeObject is sensitive to casing