Filter json data in each mat-tab

Rak 0
Viewed 25

So I have this JSON objects

[
    {
        "defectClassification": "Wrong Color",
        "sample": 0,
        "defect": "CRITICAL"
    },
    {
        "defectClassification": "Delamination",
        "sample": 0,
        "defect": "CRITICAL"
    },
    {
        "defectClassification": "Major Dents",
        "sample": 0,
        "defect": "MAJOR"
    },
    {
        "defectClassification": "Minor Misalignment",
        "sample": 0,
        "defect": "MINOR"
    },
    {
        "defectClassification": "test critical",
        "sample": 0,
        "defect": "CRITICAL"
    },
    {
        "defectClassification": "test major",
        "sample": 0,
        "defect": "MAJOR"
    },
    {
        "defectClassification": "test minor2",
        "sample": 0,
        "defect": "MINOR"
    },
    {
        "defectClassification": "Wrong Color",
        "sample": 1,
        "defect": "CRITICAL"
    },
    {
        "defectClassification": "Slight Color Variation",
        "sample": 1,
        "defect": "MINOR"
    },
    {
        "defectClassification": "Placement Misalignment",
        "sample": 10,
        "defect": "MAJOR"
    },
    {
        "defectClassification": "Major Blisters",
        "sample": 10,
        "defect": "MAJOR"
    },
    {
        "defectClassification": "test minor2",
        "sample": 10,
        "defect": "MINOR"
    }
]

This is my component:

<mat-tab-group
  [selectedIndex]="selected.value"
  (selectedIndexChange)="selected.setValue($event)"
>
  <!-- <li class="nav-item"> -->
  <mat-tab *ngFor="let tab of tabs; let tabIndex = index" [label]="tab">
    <div class="tab-content card-body">
      <div class="row">
        <div class="col-sm-4">
          <div class="table-responsive">
            <table class="table table-bordered table-hover" id="criticalTable">
              <thead class="thead-light">
                <tr>
                  <th>
                    Defect Classification
                    <span class="text-danger">(Critical)</span>
                  </th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>test</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
        <div class="col-sm-4">
          <div class="table-responsive">
            <table class="table table-bordered table-hover" id="majorTable">
              <thead class="thead-light">
                <tr>
                  <th>
                    Defect Classification
                    <span class="text-warning">(Major)</span>
                  </th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>tests</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
        <div class="col-sm-4">
          <div class="table-responsive">
            <table class="table table-bordered table-hover" id="minorTable">
              <thead class="thead-light">
                <tr>
                  <th>
                    Defect Classification
                    <span class="text-success">(Minor)</span>
                  </th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>test3</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </mat-tab>
  <!-- </li> -->
</mat-tab-group>

Now what I want is that I want to display this data in each sample(tab). So sample #0 should display all data with sample 0. Each sample has 3 tables (critical, major, and minor). So each sample has different data based on the given json objects. How to achieve this? You can use this stackblitz link.

angular-material angular
1 Answers

you should filter your data into the desired classes, something like:

  let samples = [0, 1, 10];

  filter() {
    let dataFiltered = [];
    for (let i = 0; i < this.samples.length; i++) {
      dataFiltered.push(
        this.allData.filter((sam) => sam.sample == this.samples[i])
      );
    }
    return dataFiltered;
  }

or

  samples = [0, 1, 10];
  dataFiltered = new Array<any>()[3]
  filter() {
    let dataFiltered = [];
    for (let i = 0; i < this.samples.length; i++) {
      switch (this.allData[i].sample) {
        case 0: {
          this.dataFiltered[0].push(this.samples[i])
          break;
        }
        case 1: {
          this.dataFiltered[1].push(this.samples[i])
          break;
        }
        case 10: {
          this.dataFiltered[2].push(this.samples[i])
          break;
        }
      }
    }
    return dataFiltered;
  }

if you just have those three

this should give you an array[3][N] that you can iterate over twice and build your tabs

useriWu80
Related