Iam using search bar ionInput event to search among the list but filtered output is shown for one list and not shown for other list on other page?

@aditbharadwaj wrote:

my first list code :-
HTML

<ion-searchbar class="ion-no-padding" showcancelbutton="true" (ionInput)="onSearchChange($event)" placeholder="search manga"></ion-searchbar>
    
        <ion-list no-lines *ngFor="let anime of animelist" >
          
      <ion-item  >
          
          
          <h2>Name : &nbsp; {{anime.t}}</h2>
        
                
    </ion-item>
      
        </ion-list>

    

My .ts file

getanimelist(){
  this.restProvider.getanimelist().subscribe(data => {
    this.animelist =   data;
    console.log('result ' + JSON.stringify(data) );
  });

  this.items= this.animelist;


}
onSearchChange(evt: any) {
  this.getanimelist();
  

  console.log(this.items);
  console.log(evt);
  
     const val = evt.srcElement.value;
  
  console.log(val);
  
  if (!val){
   return ;
  }
  
     
   
         this.animelist = this.items.filter((data) => {
     
    // console.log(data);
    if (data.t && val){
      if (data.t.toLowerCase().indexOf(val.toLowerCase()) > -1){
   return true;
      }
      return false;
   
    }
  })
}

my api call for this:-

apiUrl= 'https://www.mangaeden.com/api';
getanimelist(){
    return this.http.get(this.apiUrl+'/list/0').pipe(
      map(result => {
        return result['manga'];
    })
    )}

the output for this list does get filter and my list do get updated on the page as per the value enterd but for my second list on other page iam using the same concept same code but my output is not getting filtered on the page, inside the console log i see the filtered result but my page list is not getting updated
second list code below :-
HTML

<ion-searchbar class="ion-no-padding" showcancelbutton="true" (ionInput)="onSearchChange($event)" placeholder="search manga"></ion-searchbar>
    
        <ion-list no-lines *ngFor="let anime of animelist" >
          
      <ion-item  >
          
          
          <h2>Name : &nbsp; {{anime.t}}</h2>
        
                
    </ion-item>
      
        </ion-list>

    

My .ts file

getanimelist(){
    //this.isLoaded = true;
    this.restProvider.getpageanimelist().subscribe(data => {
      this.animelist =   data;
      //console.log('result ' + JSON.stringify(data) );
    });
    this.items= this.animelist;
  }


  onSearchChange(evt: any) {
    this.getanimelist();
    const val = evt.srcElement.value;
    
    
  
    console.log(this.items);
    console.log(evt);
    
       
    
    console.log(val);
    
    if (!val){
     return ;
    }
    
       
     
           this.animelist = this.items.filter((data) => {
       
      // console.log(data);
      if (data.t && val){
        if (data.t.toLowerCase().indexOf(val.toLowerCase()) > -1){
     return true;
        }
        return false;
     
      }
    });
  }

my api call for the 2nd list:-

getpageanimelist(){
      return this.http.get(this.apiUrl+'/list/0/?p=0&l=26').pipe(
        map(result => {
          return result['manga'];
      })
      )}

hope someone can help why is the filtered result not shown for my 2nd list ?

Posts: 1

Participants: 1

Read full topic