Targeted filtering for specific values

Question

Targeted filtering for specific values

I need assistance with filtering the value of PLAN

https://i.sstatic.net/QZEqu.png

When I input a value like 1

https://i.sstatic.net/N1SCz.png

The filter works correctly...

However, if I input the value 4, I encounter an issue...

https://i.sstatic.net/54WNB.png

I also retrieve information for place 8.

I'm having trouble understanding what's causing this problem?

Thank you in advance for helping me solve this issue.

todo.service.ts file

PLN_PLC = [
    {
      PLACECODE: 26,
      PLACELABEL: "Fundsettle",
      PLN_SVM: [
        {
          SVM: 16111801,
          ISIN: "LU0100749679",
          LABEL: "NEKR FD LIFESTYLE DYNAMICC",
          PLN: [
            {
              CODE: "NEKR01",
              PLAN: 8,
              CANAL: "*",
              AV: "A",
              LIB: "Fonds NEKRenta 8",
              DATEV_EFFECTIVE: "0001-01-01",
              PLAGE: [
                {
                  BORNE: 9999999999999.99,
                  FRAIS_BORDEREAU: 0.00,
                  FRAIS_RETRAIT: 0.00,
                  TYPE_COURTAGE: 1,
                  COURTAGE: 0.00,
                  MIN_COURTAGE: 0.00,
                  TYPE_FRAIS_ETR: 1,
                  FRAIS_ETRANGERS: 2.00,
                  MIN_FRAIS_ETR: 0.00
                },
                // Other data...
              ]
            },
            // Other data...
          ]
        },
        // Other data...
      ]
    },
    // Additional data...
];

// Code continues...

todo.component.ts

// TypeScript code for filtering by plan

export class TodoComponent implements OnInit {
  tarificationTitre: PlnPlcInfo[] = [];

  planFilter: string = '';

  constructor(private todoService: TodoService) { }

  ngOnInit() {
    this.tarificationTitre = this.todoService.PLN_PLC;
  }

  filterByPlan() {
    this.tarificationTitre = this.todoService.PLN_PLC.filter(item => {
      return item.PLN_SVM.some(svm => svm.PLN.some(plan => plan.PLAN.toString() === this.planFilter));
    });
  }

}

tarification-titre.response.ts

// Definition of interfaces used in the response

export interface TarificationTitreResponse {
  PLN_PLC: PlnPlcInfo[];
}

export interface PlnPlcInfo {
  PLACECODE: number;
  PLACELABEL: string;
  PLN_SVM: PlnSvmInfo[];
}

// More interfaces defined...

todo.component.html

<div class="container text-center">
    <h2 class="pt-3 pb-3">HTML Table</h2>

    <div class="row justify-content-center">

        <div class="col-12 col-sm-6 col-md-4">
            <div class="mb-2 d-flex align-items-center">
                <!-- Plan input field -->
                <label for="plan" class="mr-2" style="margin-right: 4px;">Plan</label>
                <input type="text" id="plan" name="plan" class="form-control w-60" [(ngModel)]="planFilter" (ngModelChange)="filterByPlan()" placeholder="Filter by PLAN">
            </div>
        </div>

    </div>

    <table class="mb-5">
        <tr>
            <th>Client Rate 1</th>
            <th>SVM</th>
            <th>ISIN</th>
            <th>Name</th>
            <th>Place</th>
        </tr>
        
        // HTML table content rendering...
        
    </table>
</div>

angular typescript

Answer 1

Answer №1

Filtering based on PLN_PLC occurs when certain elements meet the specified condition

PLN_PLC.filter(item => item.PLN_SVM.some(svm => svm.PLN.some(plan => plan.PLAN === 8)))

It appears that multiple filters are needed

PLN_PLC.filter(item => item.PLN_SVM.some(svm => 
                                svm.PLN.some(plan => plan.PLAN === 8)))
       .at(0) // equivalent to your svmInfo.PLN[0]
       .PLN_SVM.filter(plnSvm => plnSvm.PLN.some(plan => plan.PLAN === 8)

The final output is as follows :

[
  {
    "SVM": 16111801,
    "ISIN": "LU0100749679",
    "LABEL": "NEKR FD LIFESTYLE DYNAMICC"
    ...
    }
  },
  {
    "SVM": 37906990
    ...
  }
]

Answer 2

Filtering based on PLN_PLC occurs when certain elements meet the specified condition

PLN_PLC.filter(item => item.PLN_SVM.some(svm => svm.PLN.some(plan => plan.PLAN === 8)))

It appears that multiple filters are needed

PLN_PLC.filter(item => item.PLN_SVM.some(svm => 
                                svm.PLN.some(plan => plan.PLAN === 8)))
       .at(0) // equivalent to your svmInfo.PLN[0]
       .PLN_SVM.filter(plnSvm => plnSvm.PLN.some(plan => plan.PLAN === 8)

The final output is as follows :

[
  {
    "SVM": 16111801,
    "ISIN": "LU0100749679",
    "LABEL": "NEKR FD LIFESTYLE DYNAMICC"
    ...
    }
  },
  {
    "SVM": 37906990
    ...
  }
]

Answer 3

Answer №2

https://codepen.io/sarah_codes/dGbjMwB

  PLN_PLC.forEach((item) => { 
              return item.PLN_SVM
                 .filter(svm => svm.PLN.some(plan => plan.PLAN.toString() === '4'))
             });

Answer 4

https://codepen.io/sarah_codes/dGbjMwB

  PLN_PLC.forEach((item) => { 
              return item.PLN_SVM
                 .filter(svm => svm.PLN.some(plan => plan.PLAN.toString() === '4'))
             });

Answer 5

Answer №3

There seems to be an issue within this section of the code:

PLN_PLC.filter((item) =>
  item.PLN_SVM.some((svm) =>
    svm.PLN.some((plan) => plan.PLAN.toString() === this.planFilter)
  )
);

If there is a PLN field containing at least one object with its PLAN value matching the planFilter, then svm.PLN.some will return true. Consequently, item.PLN_SVM.some will also return true, resulting in the entire element within the PLN_SVM array being returned.

Please take into account the following example:

const PLN_PLC = [
  {
    PLN_SVM: [{ PLN: [{ PLAN: 8 }, { PLAN: 4 }] }]
  },
...
]

The output generated by the filterByPlan function will contain the first object (

PLN_SVM: [{ PLN: [{ PLAN: 8 }, { PLAN: 4 }] }]

), which includes an internal object with a PLAN field set to 4, which is not the intended result.

To address this, you can store the desired plans in an array like so:

function filterByPlanNew(array) {
  const result = [];

  array.forEach((item) => {
    item.PLN_SVM.forEach((svm) => {
      svm.PLN.forEach((plan) => {
        if (plan.PLAN === 8) {
          result.push(plan);
        }
      });
    });
  });

  return result;
}

Alternatively, you could flatten your data structure...

Visit codesandbox.

Edit:

If you wish to retain the same data structure as what filterByPlan provides, refer to this codesandbox.

Answer 6

There seems to be an issue within this section of the code:

PLN_PLC.filter((item) =>
  item.PLN_SVM.some((svm) =>
    svm.PLN.some((plan) => plan.PLAN.toString() === this.planFilter)
  )
);

If there is a PLN field containing at least one object with its PLAN value matching the planFilter, then svm.PLN.some will return true. Consequently, item.PLN_SVM.some will also return true, resulting in the entire element within the PLN_SVM array being returned.

Please take into account the following example:

const PLN_PLC = [
  {
    PLN_SVM: [{ PLN: [{ PLAN: 8 }, { PLAN: 4 }] }]
  },
...
]

The output generated by the filterByPlan function will contain the first object (

PLN_SVM: [{ PLN: [{ PLAN: 8 }, { PLAN: 4 }] }]

), which includes an internal object with a PLAN field set to 4, which is not the intended result.

To address this, you can store the desired plans in an array like so:

function filterByPlanNew(array) {
  const result = [];

  array.forEach((item) => {
    item.PLN_SVM.forEach((svm) => {
      svm.PLN.forEach((plan) => {
        if (plan.PLAN === 8) {
          result.push(plan);
        }
      });
    });
  });

  return result;
}

Alternatively, you could flatten your data structure...

Visit codesandbox.

Edit:

If you wish to retain the same data structure as what filterByPlan provides, refer to this codesandbox.

Targeted filtering for specific values

Answer №1

Answer №2

Answer №3

Similar questions

How can RootStateOrAny be turned off in React with typescript?

The formatting for Angular material radio buttons is malfunctioning

Tips for sequentially arranging and rearranging an array of numbers, even when duplicates are present

Using setTimeout within a for loop to dispatch notifications

Using Angular: Passing a service as a parameter

Submit Angular form with only the updated field values, not the entire form data

Angular 2 seems to be overwhelmed with loading files when refreshed

Nrwl NX encountering JavaScript heap exhaustion during linting process

Crop the contents of an array between two specified characters

Using Angular, you can easily add a <div> dynamically to all elements that share a class

Angular ng2-chart: i would like to showcase both the actual value and a corresponding percentage value, sourced from a different location but sharing the same index

`A constant stream of observations being triggered`

Leveraging TypeScript modules without the need for require()

What is a quick way to assign object properties to another object in TypeScript?

Guide to Generating a Library Using Angular-CLI

What is the best way to employ TypeScript for passing parameters to JavaScript functions that utilize the arguments object?

Troubleshooting: Why is Angular's Material Autocomplete failing to function with post requests?

Getting started with Angular 2 and initializing component variables

ADAL fails to send CORS header

Declaring global types in a NX and NextJS monorepository for enhanced development consistency