It is a pleasure to greet you, does anyone know how to make a pipe to filter a string of numbers within an object array?
I am trying to filter a series of numbers within an array of objects:
folderObjs = [
{
numero: '1234',
},
{
numero: '8945',
},
{
numero: '9897',
},
{
numero: '1045',
},
];
But, so far I have not succeeded, I made a simple pipe to be able to filter them:
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'filter',
})
export class FilterPipe implements PipeTransform {
transform(value: any, args?: any): any {
if (!value) return null;
if (!args) return value;
args = args.toString().toLowerCase();
console.log(args);
return value.filter(function (data) {
return JSON.stringify(data).toLowerCase().includes(args);
});
}
}
I convert the value I receive to a string and then a toLowerCase is applied to it to convert the value to the string I'm looking for. Doing a console of the value that is being searched for, I realized that for each event that is written inside the input I get back an [object object]
I think that maybe I am not doing the search correctly or maybe it is the conversion
<form [formGroup]="smsForm">
<div formArrayName="phones">
<div *ngFor="let phone of phones.controls; let i = index">
<div [formGroupName]="i">
<label>Para:</label>
<ngx-intl-tel-input class="flex-grow-1" cssClass="form-control phoneInput" [preferredCountries]="preferredCountries" [enableAutoCountrySelect]="false" [enablePlaceholder]="true" [searchCountryFlag]="true" [searchCountryField]="searchCountryField" searchCountryPlaceholder="Buscar País"
[selectFirstCountry]="false" [selectedCountryISO]="initialCountry" [separateDialCode]="true" [phoneValidation]="true" inputId="phoneInput" name="phone" [(ngModel)]="search" formControlName="phone" required>
</ngx-intl-tel-input>
</div>
<button class="delete-btn" (click)="removePhone(i)">delete</button>
</div>
<div id="contenedor">
<div>
<button (click)="addPhone()">Agregar</button>
</div>
<div>
<button (click)="onSubmit()">Enviar</button>
</div>
</div>
<div class="card mb-1" *ngFor="let data of folderObjs | filter: search">
<div class="card-body">
<h5 class="card-title">{{ data.numero }}</h5>
</div>
</div>
</div>
</form>
What do you think my problem is? I have the project in stack, in case you want to take a look at it: here
Eliminate
[(ngModel)]="search"
error cause if you give values according to your interest through smsForm with code similar to the following:The pipe: Handles the case in which the number is not found through folderFilter so the view will show the complete list but when a number is entered and submit is made if this number is in folderObjs it will only show that number if a number is entered that is not this will display the original list
In your case, as it is an array of objects, you must filter according to the property, in this case the number, also make some corrections to your pipe, you can see it in the following example:
}
If you need a broader explanation, tell me and I'll explain more.