Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – I see the filtered data on the screen, but the original data does not appear when I clear the input

I see the filtered data on the screen, but the original data does not appear when I clear the input

Here I show _todayShare in the <a> tag as an item in order

 

<span>Share</span>
        <input
          [(ngModel)]="sharedsearchText"
          (keyup)="applyFilter(sharedsearchText)"
          style="width: 50%; margin-top: 1px; margin-bottom: 1px;"
          matInput
          placeholder="Ara..."
        />
      </div>
      <div class="list" slim-scroll [slimScrollOptions]="{ height: 450 }">
        <a
          *ngFor="
            let item of _todayShare | keyvalue : valueAscOrder;
            let i = index
          "
          style="cursor: pointer"
          class="transition"
          (click)="showliveRss(item)"
        >

_todayShare is a map as you understand and I made a copy of it below, but again it didn’t work.

_todayShare: Map<string, any> = new Map<string, any>();


ngOnInit() {
        this._todayShare = new Map<string, any>();
....
}

applyFilter(value: string) {
    
    const filterValue = value.trim().toLowerCase();
    const filteredMap = new Map<string, any>();
    const _todayShareBackup = new Map<string, any>(this._todayShare)

    _todayShareBackup.forEach((item, key) => {
      if (key.toLowerCase().includes(filterValue) ||
        JSON.stringify(item).toLowerCase().includes(filterValue)) {
        filteredMap.set(key, item);
      }
    });
    this._todayShare = filteredMap
  }

enter image description here

When I clear the input here, I want all of my data to come as follows
enter image description here

Tags:

2

Answers


  1. 0

    The issue here is that applyFilter function, where _todayShare is being overwritten with the filtered results does not restore the original data when the filter is cleared, You need to have a backup of the original data before getting filtered, so when you refilter it doesn’t apply to the previously filtered data but on the original data.

    export class YourComponent implements OnInit {
  _todayShare: Map<string, any> = new Map<string, any>();
  _originalTodayShare: Map<string, any>; // This will store the original data

  ngOnInit() {
    this._todayShare = new Map<string, any>();
    this._originalTodayShare = new Map<string, any>(this._todayShare);
    // Load your _todayShare data here and then make a copy to _originalTodayShare
  }

  applyFilter(value: string) {
    if (!value.trim()) {
      // If there is no input, restore the original data
      this._todayShare = new Map<string, any>(this._originalTodayShare);
      return;
    }

    const filterValue = value.trim().toLowerCase();
    const filteredMap = new Map<string, any>();

    this._originalTodayShare.forEach((item, key) => {
      if (key.toLowerCase().includes(filterValue) ||
        JSON.stringify(item).toLowerCase().includes(filterValue)) {
        filteredMap.set(key, item);
      }
    });

    this._todayShare = filteredMap;
  }
}
    Login or Signup to reply.
  2. 0

    Try to add a new variable where you store complete data.In filter-function filter the data and assign it to variable(_todayShare) which will be used to render filtered data on UI.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search