I need to implement a filter on the titles of my stored data, but I am facing an issue where the structure of the filtered data changes. The original "key" of the data gets deleted by the filter and is replaced with an index instead.
Link to repository : View repository
To see my database structure, click here: Database structure
Below are the visuals showing the data before and after filtering:
Snippet from my component code:
filter(query: string) {
this.filteredItems = (query) ?
Object.values(this.items).filter(p=>p.title.normalize("NFD").replace(/[\u0300-\u036f]/g, "")
.toLowerCase().includes(query.toLowerCase())) :
this.items;
}
Template snippet:
<input #query (keyup)="filter(query.value)" type="text" class="form-control search" placeholder="Search...">
<mat-list-item id="item_list" *ngFor="let item of filteredItems | keyvalue ; let i = index" [class.changeColor]="item.key == selectedValue">
<a (click)="openItem(item, item.key)" *ngIf="item.value.title" matLine><mat-icon [class.yellow]="item.key == selectedValue">code</mat-icon>{{item.value.title}}</a>
<button mat-icon-button>
<mat-icon id="edit_item_icon" (click)="onEditItem(item)">edit</mat-icon>
<mat-icon (click)="openDialog(item.key, item.value.title)">delete_sweep</mat-icon>
</button>
</mat-list-item>
As a result, when I try to edit an item after applying the filter, it creates a new item...