Typescript: passing arrays as parameter

Question

I am trying to clean my code and make from more functions, one function. But I need to pass two arrays as a parameter and one string. The function is working correctly, but an array, I am passing in the parameter, is not updating in class.

This is my class in typescript, commented code in function onCompanyRenterNameChanged is working, but the new code below the comment, is not working and after the run, it does not update filteredListOfRenters, I am passing as a parameter. It still returns full list, not filtered, but I have no idea why.

export class FilterDialogComponent implements OnInit {
  filteredListOfRenters: Company[];
  filteredListOfStatuses: Status[];
  filteredListOfCars: Car[];

  constructor(...) {
  }

  ngOnInit() {
    this.fillFilteredListsOnInit();
    this.selectValueInControl();
  }

  confirmFilter(data): void {
    data.renterId = this.filterFormGroup.get('renterControl').value;
    data.statusId = this.filterFormGroup.get('statusControl').value;
    data.carId = this.filterFormGroup.get('carControl').value;
    this.dialogRef.close({
      data
    });
  }

  onCompanyRenterNameChanged(value: string) {

    //this.fillFilteredListOfRenterCompanies(value.toLowerCase());
    this.fillFilteredList(this.codeListService.listOfRenters, this.filteredListOfRenters, value.toLowerCase());
  }

  onStatusChanged(value: string) {
    this.fillFilteredListOfStatuses(value.toLowerCase());
  }

  onCarChanged(value: string) {
    this.fillFilteredListOfCars(value.toLowerCase());
  }

  fillFilteredList(codeList: any[], filteredList: any[], filter: string){
    if(codeList.length !== 0){
      filteredList = codeList.filter((item) => {
        if(item.name !== null){
          return item.name.toLowerCase().startsWith(filter);
        }
      })
    }
  }

  fillFilteredListOfRenterCompanies(filter: string) {
    if (this.codeListService.listOfRenters.length !== 0) {
      this.filteredListOfRenters = this.codeListService.listOfRenters.filter((item) => {
        if (item.name !== null)
          return item.name.toLowerCase().startsWith(filter);
      });
    }
  }

  fillFilteredListOfStatuses(filter: string) {
    if (this.codeListService.statuses.length !== 0) {
      this.filteredListOfStatuses = this.codeListService.statuses.filter((item) => {
        if (item.name !== null)
          return item.name.toLowerCase().startsWith(filter);
      });
    }
  }

  fillFilteredListOfCars(filter: string) {
    if (this.codeListService.cars.length !== 0) {
      this.filteredListOfCars = this.codeListService.cars.filter((item) => {
        let carName = this.codeListService.getNameOfManufacturerById(item.manufacturerId) + " " + item.model + " " + item.ecv;
        if (carName !== null)
          return carName.toLowerCase().startsWith(filter);
      });
    }
  }

  fillFilteredListsOnInit(){
    this.filteredListOfRenters = this.codeListService.listOfRenters;
    this.filteredListOfStatuses = this.codeListService.statuses;
    this.filteredListOfCars = this.codeListService.cars;
  }
}

Javascript uses pass-by sharing, so setting a new memory reference for the params will never work. Instead, you should return values from your functions, and set the values of your variables where you call the function. — user4676340
– user4676340, Commented Feb 4, 2019 at 14:03
Please provide a working demo, that should help to track the issue. Use CodePen or any other tool. — Chris Tapay
– Chris Tapay, Commented Feb 4, 2019 at 14:32

Mitchel Delachevrotiere · Accepted Answer · 2019-02-04 14:33:50Z

3

You're setting filteredList to a new array by assigning Array.filter to it. See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter.

What you want to do is return the new results from the function and assign them to the array variable

onCompanyRenterNameChanged(value: string) {
    filteredArray = this.fillFilteredList(this.codeListService.listOfRenters, 
    this.filteredListOfRenters, value.toLowerCase());
}

fillFilteredList(codeList: any[], filteredList: any[], filter: string){
    if(codeList.length !== 0){
      return codeList.filter((item) => {
        if(item.name !== null){
          return item.name.toLowerCase().startsWith(filter);
        }
      })
    }
    else {
        return [];
    }
 }

answered Feb 4, 2019 at 14:33

Mitchel Delachevrotiere

461 bronze badge

Sign up to request clarification or add additional context in comments.

Comments

asdf_enel_hak · Accepted Answer · 2019-02-04 13:58:42Z

1

You should return result.

update code as below:

  fillFilteredList(codeList: any[], filteredList: any[], filter: string){
    if(codeList.length !== 0){
      filteredList = codeList.filter((item) => {
        if(item.name !== null){
          return item.name.toLowerCase().startsWith(filter);
        }
      });
      return filteredList 
    }
    return []
  }

answered Feb 4, 2019 at 13:58

asdf_enel_hak

7,6585 gold badges47 silver badges91 bronze badges

1 Comment

Radoslav Sabo Over a year ago

I tried it before, but it does not help, the value filteredListOfRenters is still the same

Collectives™ on Stack Overflow

Typescript: passing arrays as parameter

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related