Filter arrays inside array on the basis of status

Question

I have a array which contains multiple arrays. Sample data is as follows:

[
[
  {
    "id":1,
    "status":1
  },
   {
    "id":2,
    "status":2
  },
   {
    "id":3,
    "status":3
  },
   {
    "id":4,
    "status":4
  }
],
[
   {
    "id":5,
    "status":1
  },
   {
    "id":6,
    "status":2
  },
   {
    "id":7,
    "status":3
  },
   {
    "id":8,
    "status":4
  }
],
[
  {
    "id":8,
    "status":1
  },
   {
    "id":9,
    "status":1
  }
]
]

I am using PrimeNg checkbox. My code for it as follows:

<h5>Multiple</h5>
<div class="p-field-checkbox">
  <p-checkbox
    name="group1"
    value="New York"
    [(ngModel)]="selectedCities"
    inputId="ny"
  ></p-checkbox>
  <label for="ny">New York</label>
</div>
<div class="p-field-checkbox">
  <p-checkbox
    name="group1"
    value="San Francisco"
    [(ngModel)]="selectedCities"
    inputId="sf"
  ></p-checkbox>
  <label for="sf">San Francisco</label>
</div>
<div class="p-field-checkbox">
  <p-checkbox
    name="group1"
    value="Los Angeles"
    [(ngModel)]="selectedCities"
    inputId="la"
  ></p-checkbox>
  <label for="la">Los Angeles</label>
</div>
<div class="p-field-checkbox">
  <p-checkbox
    name="group1"
    value="Chicago"
    [(ngModel)]="selectedCities"
    inputId="ch"
  ></p-checkbox>
  <label for="ch">Chicago</label>
</div>

Stackblitz is as follows:

https://stackblitz.com/edit/primeng-checkbox-demo-d9kasz?file=src%2Fapp%2Fapp.component.html

I want to filter array such that if "New York" is selected then each internal array should have only elements with status 1.If "San Francisco" is selected then each internal array should have only elements with status 2. if "Los Angeles" is selected then each internal array should have only elements with status 3. If "Chicago" is selected then each internal array should have only elements with status 4. For example if "New York" is selected than final output should be as follows:

output : [
[
  {
    "id":1,
    "status":1
  }
],
[
   {
    "id":5,
    "status":1
  }
],
[
  {
    "id":8,
    "status":1
  },
   {
    "id":9,
    "status":1
  }
]
]

and so on for other elements. How can I do this?

Answer 1

You can model the data used to build the form in your component like so:

type City = {
  status: Number;
  inputId: string;
  name: string;
};

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
})
export class AppComponent {
  //...

  cities: City[] = [
    { status: 1, name: 'New York', inputId: 'ny' },
    { status: 2, name: 'San Francisco', inputId: 'sf' },
    { status: 3, name: 'Los Angeles', inputId: 'la' },
    { status: 4, name: 'Chicago', inputId: 'ch' },
  ];
 //...

That way you can build out your form dynamically from the component data.

<h5>Multiple</h5>
<div class="p-field-checkbox" *ngFor="let city of cities">
  <p-checkbox
    name="group1"
    [value]="city"
    [(ngModel)]="selectedCities"
    [inputId]="city.inputId"
  ></p-checkbox>
  <label [for]="city.inputId"> {{ city.name }}</label>
</div>

When you select a checkbox, the city object for the selected city is stored in the selectedCities array and you can then use statuses of the selectedCities to filter the given array in your component.

Let's name your array collectionGroup for the purpose of this exercise:

const EMPTY = [];
//...
const statuses: Number[] = this.selectedCities.map(city => city.status);

const filteredCollectionGroup =
  statuses.length > 0
    ? this.collectionGroup.map((collection) => {
        return collection.filter(
          (item) => statuses.indexOf(item.status) > -1
        );
      })
    : EMPTY;