CODEWITHSUNDEEP
typescriptionic3
Kapil Soni
Kapil Soni

Reputation: 1051

Original array value are change after search data in ionic3?

I have implementing search filter in ionic3 it is working but after remove the string from the searchbar it will be also remove the original array.i have also hold the data in the another array but not working it is affect on the original array.tell me what's the wrong in my code?

triggerCmnFunmction(data : any) {
  if(data) {
      //postMethod for post data in the API.....
    this.service.postMethod1(this.service.baseurl()+ this.apiURL,data).then(data => {
      if(data.status) {

          //hold the data in array as well as set anothe array for filter the list.....
         this.noticeBoardList = data.data;

          this.filterDataList.event = this.noticeBoardList.event.map(item => Object.assign({}, item));
          this.filterDataList.holiday = this.noticeBoardList.holiday.map(item => Object.assign({}, item));
          this.filterDataList.notice = this.noticeBoardList.notice.map(item => Object.assign({}, item));

         //dismiss spinner
         this.service.dismissSpinner();
      } else {
          //reset array if not found any event....
         this.noticeBoardList = [];
      }
    },error => {
        //dismiss spinner
       this.service.dismissSpinner();
    });
  } 
}

    //searchData for serching 
    searchData() {

    //excute only if any record exist......
    if(this.filterDataList) {
        if(this.filterDataList.event) {
           this.filterDataList.event = this.noticeBoardList.event.filter((item) => {
            return item.title.toLowerCase().indexOf(this.searchValue.toLowerCase()) > -1 || item.event_place.toLowerCase().indexOf(this.searchValue.toLowerCase()) > -1
          });  
        }

       if(this.filterDataList.holiday) {
           this.filterDataList.holiday = this.noticeBoardList.holiday.filter((item) => {
            return item.title.toLowerCase().indexOf(this.searchValue.toLowerCase()) > -1 || item.event_place.toLowerCase().indexOf(this.searchValue.toLowerCase()) > -1
          });  
       }

       if(this.filterDataList.notice) {
          this.filterDataList.notice = this.noticeBoardList.notice.filter((item) => {
            return item.title.toLowerCase().indexOf(this.searchValue.toLowerCase()) > -1 || item.event_place.toLowerCase().indexOf(this.searchValue.toLowerCase()) > -1
          });  
       }
    }
}
<ion-searchbar #search
    [(ngModel)]="searchValue"
    [showCancelButton]="shouldShowCancel"
    (ionInput)="searchData($event)"
    (ionClear)="onCancel($event)">
  </ion-searchbar>

Upvotes: 0

Views: 48

Answers (2)

deerawan
deerawan

Reputation: 8443

Looking at your statement

i have also hold the data in the another array but not working it is affect on the original array.

Yes because if we use = to assign array into another variable, it will still be stored as a reference.

The Solution is to copy each item. If your items in array are basic simple object (no nested field), using object.assign or spread syntax is enough. 

this.filterDataList = [...this.noticeBoardList]; // not robust if item is updated

// or

this.filterDataList = this.noticeBoardList.map(item => ({...item});

// or

this.filterDataList = this.noticeBoardList.map(item => Object.assign({}, item)); // if spread syntax is not supported

However, if item is in array complex json object, I still prefer to use lodash cloneDeep. Please use it wisely since it can affect memory if it is big array.

import * as _ from 'lodash';

this.filterDataList = _.cloneDeep(this.noticeBoardList);

Hope it helps

Upvotes: 1

Jazib
Jazib

Reputation: 1381

You need to deep copy your list of objects. Since Javascript objects are stored as refs. add this to your code

private deepCopyArrayObejct(array: any[]) {
    return array.map(x => Object.assign({}, x));
  }

and use it like this 

//I'm assuming your data is list of objects.

this.filterDataList = this.deepCopyArrayObejct(this.noticeBoardList);

Upvotes: 0

Related Questions